/* ====================================================================
   nex-landing.css  —  LIGHT editorial landing page
   NexStudio-style composition. Scoped to .nex-landing only.
   Does NOT affect summarizer.php, result.php, or any other page.
   ==================================================================== */

/* ------------------------------------------------------------------
   0a. Force light-mode palette on this page regardless of the user's
       theme preference. The landing page is always rendered light.
       Overrides :root[data-theme="dark"] by targeting the scoped
       class with higher specificity.
   ------------------------------------------------------------------ */
:root .nex-landing,
:root[data-theme="dark"] .nex-landing  {
  color-scheme: light;

  /* Surfaces & text */
  --color-bg:              #eeedea;
  --color-bg-secondary:    #f7f6f2;
  --color-bg-tertiary:     #e5e4de;
  --color-surface:         #ffffff;
  --color-text:            #16171c;
  --color-text-secondary:  #51535e;
  --color-text-muted:      #636572;

  /* Borders */
  --color-border:          #d9d8d4;
  --color-border-strong:   #81838e;

  /* Accent — keep same purple across themes */
  --color-accent:          #7f00ff;
  --color-accent-hover:    #6800d4;
  --color-accent-active:   #5700b1;
  --color-accent-soft:     #f0e7ff;
  --color-accent-strong:   #6800d4;
  --color-accent-border:   #b68de5;
  --color-on-accent:       #ffffff;

  /* Aliases used throughout the landing stylesheet */
  --ink:        #16171c;
  --ink-muted:  #51535e;
  --ink-faint:  #636572;
  --line:       #d9d8d4;
  --canvas:     #eeedea;
  --accent:     #7f00ff;
}

/* ------------------------------------------------------------------
   0b. Layout box-sizing
   ------------------------------------------------------------------ */

.nex-landing,
.nex-landing *,
.nex-landing *::before,
.nex-landing *::after  {
  box-sizing: border-box;
}

.nex-landing  {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-heading);
  overflow-x: hidden;
}

/* Hide theme toggle on landing page — landing page has no night mode */
.nex-landing .result-theme-toggle,
.nex-landing [data-theme-toggle] {
  display: none !important;
}

/* ------------------------------------------------------------------
   2. HERO
   ------------------------------------------------------------------ */
.nex-hero  {
  position: relative;
  min-height: 100svh;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 0 var(--pad-inline-page) var(--space-10);
}

.nex-hero__headline  {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: var(--space-24);
  margin: 0;
  flex: 1;
  justify-content: center;
}

.nex-hero__line  {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-display-xl);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--letter-spacing-heading);
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
  user-select: none;
}

.nex-hero__line + .nex-hero__line  {
  margin-top: 0.04em;
}

.nex-hero__line--sm  {
  font-size: var(--fs-display-xl);
}

.nex-hero__sculpture  {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  width: min(38vw, 56svh, 560px);
  aspect-ratio: 1;
}

.nex-hero__sculpture img  {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
  filter: contrast(1.05);
}

.nex-hero__bottom  {
  position: absolute;
  bottom: 28px;
  left: var(--pad-inline-page);
  right: var(--pad-inline-page);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 3;
}

.nex-hero__label  {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* ------------------------------------------------------------------
   3. ABOUT SECTION
   ------------------------------------------------------------------ */
.nex-about  {
  background: var(--color-bg);
  padding: 0 var(--pad-inline-page) clamp(var(--space-20), 10vw, 160px);
  position: relative;
}

.nex-section-header  {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  padding: var(--space-9) 0 72px;
  border-top: var(--border-width) solid var(--color-border);
}

.nex-section-num  {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}

.nex-section-label  {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.nex-about__statement  {
  padding-left: max(0px, min(16.67vw, 260px));
  max-width: 80vw;
  margin: 0;
}

.nex-about__statement h2  {
  font-family: var(--font-heading);
  font-size: var(--fs-display-xl);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--letter-spacing-heading);
  line-height: 0.93;
  color: var(--color-text);
  margin: 0;
}

.nex-about__secondary  {
  font-family: var(--font-heading);
  font-size: var(--fs-display-xl);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--letter-spacing-heading);
  line-height: 0.95;
  color: var(--color-text);
  margin: 0.5em 0 0;
}



/* ------------------------------------------------------------------
   4. SUMMARIZER SECTION
   ------------------------------------------------------------------ */
.nex-summarize  {
  background: var(--color-bg);
  padding: 0 var(--pad-inline-page) clamp(var(--space-20), 10vw, 140px);
}

.nex-summarize .nex-section-header  {
  border-top: var(--border-width) solid var(--color-border);
}

.nex-summarize__headline  {
  font-family: var(--font-heading);
  font-size: var(--fs-display-xl);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--letter-spacing-heading);
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 clamp(var(--space-10), 6vw, var(--space-24));
}

/* Form shell — strips card styling, keeps all functional hooks */
.nex-form-shell  {
  width: 100%;
}

.nex-form-shell .summary-workspace,
.nex-form-shell .summary-panel  {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0 !important;
  padding: 0;
}

.nex-form-shell .workspace-title  {
  display: none;
}

.nex-form-shell .summary-panel--page  { padding: 0; }

.nex-form-shell .summary-grid  {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nex-form-shell .summary-card  {
  background: transparent;
  border: none;
  border-radius: 0 !important;
  box-shadow: none;
  padding: 0;
  margin: 0 !important;
}

.nex-form-shell .summary-panel__footer  {
  padding: 0;
  background: transparent;
  border: none;
}

.nex-form-shell .summary-actions-group  {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-top: var(--space-10);
}

/* Labels */
.nex-form-shell label  {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}
.nex-form-shell .label-hint  {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--weight-normal);
  font-size: var(--font-size-xs);
  opacity: 0.8;
}

/* Text inputs */
.nex-form-shell input#document_title,
.nex-form-shell textarea#text  {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: var(--border-width) solid var(--color-border);
  border-radius: 0;
  font-family: var(--font-heading);
  color: var(--color-text);
  outline: none;
  box-shadow: none;
  transition: border-color 200ms ease;
  display: block;
}

.nex-form-shell input#document_title  {
  padding: var(--space-4) 0;
  font-size: var(--font-size-lg);
  font-weight: var(--weight-normal);
}

.nex-form-shell textarea#text  {
  min-height: 200px;
  padding: var(--space-5) 0;
  font-size: var(--font-size-lg);
  font-weight: var(--weight-normal);
  resize: vertical;
}

.nex-form-shell input#document_title::placeholder,
.nex-form-shell textarea#text::placeholder  {
  color: var(--color-text-secondary);
  opacity: 1;
}

.nex-form-shell input#document_title:hover,
.nex-form-shell textarea#text:hover  {
  border-bottom-color: var(--color-accent);
}

.nex-form-shell input#document_title:focus,
.nex-form-shell textarea#text:focus  {
  border-bottom-color: var(--color-accent);
}

/* File input & drop zone */
.nex-drop-zone  {
  border: var(--border-width) solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  background: var(--color-accent-soft);
  padding: clamp(var(--space-8), 4vw, var(--space-16));
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  width: 100%;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.nex-drop-zone:hover  {
  border-color: var(--color-accent);
  background-color: var(--color-accent-soft);
  box-shadow: var(--shadow-accent);
}

.nex-drop-zone:hover .nex-drop-zone__icon  {
  opacity: 1;
}

.nex-drop-zone:focus-within  {
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring-shadow);
  outline: none;
}

.nex-drop-zone.is-drag-over  {
  border-color: var(--color-accent);
  background-color: var(--color-accent-soft);
  box-shadow: var(--focus-ring-shadow);
}

.nex-drop-zone.is-drag-over .nex-drop-zone__icon  {
  opacity: 1;
}

.nex-drop-zone__icon  {
  font-size: calc(var(--font-size-md) * 2.0);
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.85;
  margin-bottom: var(--space-3);
  user-select: none;
  transition: opacity 200ms ease;
}

.nex-drop-zone__hint  {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
  transition: color 200ms ease;
}

.nex-drop-zone__action  {
  color: var(--color-accent);
  font-weight: var(--weight-bold);
}

.nex-drop-zone__file-row  {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.nex-drop-zone__filename  {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  padding: var(--space-1-5) var(--space-3-5);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  border: var(--border-width) solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  max-width: 90%;
  word-break: break-all;
}

.nex-drop-zone__filename::before  {
  content: '●';
  color: var(--color-accent);
  font-size: var(--font-size-xs);
}

.nex-drop-zone__remove  {
  cursor: pointer;
  position: relative;
  z-index: 3;
}

/* Visually hidden real file input sits on top of drop zone */
.nex-form-shell input#pdf  {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.nex-form-shell input#pdf:focus-visible  {
  outline: none;
}

@media (max-width: 640px)  {
  .nex-drop-zone  {
  padding: var(--space-6) var(--space-4);
}
  .nex-drop-zone__hint  {
  font-size: var(--font-size-xs);
}
}

/* Selects */
.nex-form-shell select  {
  appearance: auto;
  background: transparent;
  border: var(--border-width) solid var(--color-border);
  border-radius: 0;
  padding: var(--space-3-5) var(--space-10) var(--space-3-5) var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text);
  cursor: pointer;
  outline: none;
  width: 100%;
  background-image: none;
  background-repeat: no-repeat;
  background-position: right 16px center;
  transition: border-color 200ms ease;
}
.nex-form-shell select:hover  {
  border-color: var(--color-accent);
}
.nex-form-shell select:focus  {
  border-color: var(--color-accent);
  outline: none;
}

/* Range slider */
.nex-form-shell .length-slider  { width: 100%; }
.nex-form-shell .length-slider__header  {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}
.nex-form-shell #summary-length-output  {
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
}
.nex-form-shell .length-slider__input  {
  width: 100%;
  accent-color: var(--color-accent);
  height: 2px;
  cursor: pointer;
}
.nex-form-shell .length-slider__ticks  {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* Buttons */
.nex-form-shell .summary-submit-button  {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  cursor: pointer;
  box-sizing: border-box;
}

.nex-form-shell .summary-nutshell-button  {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

/* Flash error */
.nex-form-shell .flash-error  {
  background: var(--color-danger-soft);
  border: var(--border-width) solid color-mix(in srgb, var(--color-danger) 25%, transparent);
  color: var(--color-danger);
  padding: var(--space-3-5) var(--space-5);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-6);
}

/* Privacy & style notes */
.nex-form-shell .privacy-note,
.nex-form-shell .style-description  {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
  margin: var(--space-2-5) 0 0;
}

/* Editorial form rows */
.nex-form-row  {
  display: grid;
  grid-template-columns: clamp(120px, 18vw, 260px) minmax(0, 1fr);
  gap: 0 clamp(var(--space-6), 4vw, var(--space-16));
  align-items: start;
  padding: var(--space-9) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.nex-form-row:first-child  {
  border-top: var(--border-width) solid var(--color-border);
}

.nex-form-row__label  {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding-top: var(--space-1);
}

/* ------------------------------------------------------------------
   5. DARK FEATURES SECTION
   ------------------------------------------------------------------ */
.nex-dark  {
  background: var(--color-inverse-bg);
  color: var(--color-inverse-text);
  padding: 0 var(--pad-inline-page) clamp(var(--space-20), 10vw, 160px);
}

.nex-dark .nex-section-header  {
  border-top: var(--border-width) solid var(--color-inverse-border);
  padding-top: var(--space-9);
}

.nex-dark .nex-section-num,
.nex-dark .nex-section-label  {
  color: var(--color-inverse-muted);
}

.nex-dark__title  {
  font-family: var(--font-heading);
  font-size: var(--fs-display-xl);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--letter-spacing-heading);
  line-height: 0.82;
  text-transform: uppercase;
  color: var(--color-inverse-text);
  margin: 0 0 clamp(60px, 8vw, 120px);
}

.nex-feature  {
  border-top: var(--border-width) solid var(--color-inverse-border);
  padding: clamp(var(--space-10), 5vw, var(--space-20)) 0;
}

.nex-feature:last-of-type  {
  border-bottom: var(--border-width) solid var(--color-inverse-border);
}

.nex-feature__header  {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: var(--space-10);
  align-items: start;
  margin-bottom: clamp(var(--space-8), 4vw, var(--space-16));
}

.nex-feature__num  {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-inverse-muted);
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}

.nex-feature__title  {
  font-family: var(--font-heading);
  font-size: var(--fs-display-xl);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--letter-spacing-heading);
  line-height: 0.92;
  color: var(--color-inverse-text);
  margin: 0;
  text-transform: uppercase;
}

.nex-feature__meta  {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-inverse-muted);
  margin: 0 0 var(--space-5);
}

.nex-feature__desc  {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--weight-normal);
  line-height: var(--line-height-body);
  color: var(--color-inverse-muted);
  margin: 0;
  max-width: 38ch;
}

.nex-feature__media  {
  width: 100%;
  aspect-ratio: 16 / 8;
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  background: var(--color-inverse-bg);
}

.nex-feature__media img  {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nex-feature__media-placeholder  {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-10);
}

.nex-feature__media-placeholder-icon  {
  font-size: calc(var(--font-size-md) * 3.0);
  opacity: 0.2;
}

.nex-feature__media-placeholder-label  {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-inverse-muted);
}

.nex-feature[data-color="a"] .nex-feature__media  { background: var(--color-inverse-bg); }
.nex-feature[data-color="b"] .nex-feature__media  { background: var(--color-inverse-bg); }
.nex-feature[data-color="c"] .nex-feature__media  { background: var(--color-inverse-bg); }

.nex-feature__scope  {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.nex-feature__scope-label  {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-inverse-muted);
  white-space: nowrap;
}

.nex-feature__scope-tags  {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-inverse-muted);
  flex: 1;
  text-align: right;
}

/* ------------------------------------------------------------------
   6. ACCENT CTA SECTION
   Landing-page CTA is always rendered in the original teal palette
   (#3ecfbf bg / #050e0d text) regardless of the global accent token.
   All overrides are scoped to .nex-landing to avoid affecting other pages.
   ------------------------------------------------------------------ */

/* Pin teal palette on the CTA — overrides var(--color-accent) purple */
.nex-landing .nex-cta  {
  --cta-bg:      #3ecfbf;
  --cta-text:    #050e0d;
  --cta-muted:   rgba(5, 14, 13, 0.55);
  --cta-border:  rgba(5, 14, 13, 0.22);
}

.nex-cta  {
  background: var(--cta-bg, var(--color-accent));
  color: var(--cta-text, var(--color-on-accent));
  padding: 0 var(--pad-inline-page) clamp(60px, 8vw, 120px);
  position: relative;
  overflow: hidden;
}

.nex-cta .nex-section-header  {
  border-top: 1px solid var(--cta-border, color-mix(in srgb, var(--color-on-accent) 30%, transparent));
  padding-top: var(--space-9);
}

.nex-cta .nex-section-num,
.nex-cta .nex-section-label  {
  color: var(--cta-muted, color-mix(in srgb, var(--color-on-accent) 75%, transparent));
}

.nex-cta__bg-num  {
  position: absolute;
  right: -8vw;
  bottom: -10vw;
  font-family: var(--font-heading);
  font-size: 55vw;
  font-weight: var(--weight-heavy);
  line-height: 1;
  opacity: 0.07;
  color: var(--cta-text, var(--color-on-accent));
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.06em;
  z-index: 0;
}

.nex-cta__eyebrow  {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cta-muted, color-mix(in srgb, var(--color-on-accent) 75%, transparent));
  margin: 0 0 clamp(24px, 3vw, 48px);
}

.nex-cta__statement  {
  font-family: var(--font-heading);
  /* Original large headline — matches reference screenshot scale */
  font-size: clamp(3.5rem, 9vw, 10rem);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.06em;
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--cta-text, var(--color-on-accent));
  margin: 0 0 clamp(48px, 7vw, 96px);
  position: relative;
  z-index: 1;
  max-width: 85vw;
}

.nex-cta__line--outline  {
  display: block;
  -webkit-text-stroke: 2px var(--cta-text, #050e0d);
  color: transparent;
}

@supports not (-webkit-text-stroke: 2px #050e0d) {
  .nex-cta__line--outline {
    color: var(--cta-text, #050e0d);
    opacity: 0.85;
  }
}

.nex-capsule,
.nex-capsule:visited  {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  border: var(--border-width-strong) solid var(--color-nav-link);
  border-radius: 999px;
  background: transparent;
  padding: clamp(24px, 3.5vw, 48px) clamp(28px, 4vw, 60px);
  min-height: clamp(110px, 13vw, 160px);
  text-decoration: none;
  color: var(--color-nav-link);
  transition: background 300ms ease, color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
  cursor: pointer;
}

.nex-capsule:hover,
.nex-capsule:focus-visible,
.nex-capsule:visited:hover,
.nex-capsule:visited:focus-visible  {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: 0 12px 32px rgba(127, 0, 255, 0.35);
}

.nex-capsule__left  {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: inherit;
}

.nex-capsule__eyebrow  {
  font-family: var(--font-heading);
  font-size: 0.625rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.7;
  transition: opacity 250ms ease, color 250ms ease;
}

.nex-capsule__text  {
  font-family: var(--font-heading);
  /* Original large CTA label — matches reference */
  font-size: clamp(1.375rem, 3.5vw, 4rem);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: inherit;
  transition: color 250ms ease;
}

.nex-capsule__arrow  {
  width: clamp(64px, 8vw, 120px);
  height: clamp(64px, 8vw, 120px);
  border-radius: 50%;
  border: var(--border-width) solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
  transition: transform 300ms ease, color 250ms ease, border-color 250ms ease;
}

.nex-capsule__arrow svg  {
  stroke: currentColor;
}

.nex-capsule:hover .nex-capsule__eyebrow,
.nex-capsule:focus-visible .nex-capsule__eyebrow,
.nex-capsule:visited:hover .nex-capsule__eyebrow,
.nex-capsule:visited:focus-visible .nex-capsule__eyebrow  {
  color: var(--color-on-accent);
  opacity: 0.9;
}

.nex-capsule:hover .nex-capsule__text,
.nex-capsule:focus-visible .nex-capsule__text,
.nex-capsule:visited:hover .nex-capsule__text,
.nex-capsule:visited:focus-visible .nex-capsule__text  {
  color: var(--color-on-accent);
}

.nex-capsule:hover .nex-capsule__arrow,
.nex-capsule:focus-visible .nex-capsule__arrow,
.nex-capsule:visited:hover .nex-capsule__arrow,
.nex-capsule:visited:focus-visible .nex-capsule__arrow  {
  border-color: var(--color-on-accent);
  color: var(--color-on-accent);
  transform: translate(6px, -6px);
}

.nex-capsule:hover .nex-capsule__arrow svg,
.nex-capsule:focus-visible .nex-capsule__arrow svg,
.nex-capsule:visited:hover .nex-capsule__arrow svg,
.nex-capsule:visited:focus-visible .nex-capsule__arrow svg  {
  stroke: var(--color-on-accent);
}

/* ------------------------------------------------------------------
   8. SCROLL REVEAL
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference)  {
  .nex-reveal  {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 700ms var(--ease-standard), transform 700ms var(--ease-standard);
}
  .nex-reveal.is-visible  {
  opacity: 1;
  transform: translateY(0);
}

  .nex-reveal-scale  {
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 900ms var(--ease-standard), transform 900ms var(--ease-standard);
}
  .nex-reveal-scale.is-visible  {
  opacity: 1;
  transform: scale(1);
}
}

@media (prefers-reduced-motion: reduce)  {
  .nex-reveal,
  .nex-reveal-scale  {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
}

/* ------------------------------------------------------------------
   9. Nutshell panel themed — Editorial Light Architecture
   ------------------------------------------------------------------ */
.nex-landing .nutshell-panel  {
  margin-top: var(--space-6);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: clamp(var(--space-5), 2.5vw, var(--space-7));
  color: var(--color-text);
  box-shadow: var(--shadow-xs);
  animation: nutshell-slide 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nex-landing .nutshell-panel__header  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3-5);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid color-mix(in srgb, var(--color-text) 7%, transparent);
}

.nex-landing .nutshell-badge  {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-accent);
}

.nex-landing .nutshell-icon  {
  stroke: var(--color-accent);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.nex-landing .nutshell-copy-btn  {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  cursor: pointer;
  box-sizing: border-box;
}

.nex-landing .nutshell-copy-btn svg  {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: currentColor;
}

.nex-landing .nutshell-body  {
  position: relative;
  min-height: 36px;
}

.nex-landing .nutshell-loading  {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2-5) 0;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-medium);
}

.nex-landing .nutshell-spinner  {
  width: 18px;
  height: 18px;
  border: var(--border-width-strong) solid color-mix(in srgb, var(--color-accent) 18%, transparent);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: nut-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.nex-landing .nutshell-text  {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: 1.7;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin: 0;
  max-width: 75ch;
  letter-spacing: var(--letter-spacing-heading);
}

/* Error state */
.nex-landing .nutshell-panel--error  {
  border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);
}

.nex-landing .nutshell-panel--error .nutshell-badge  {
  color: var(--color-danger);
}

.nex-landing .nutshell-panel--error .nutshell-icon  {
  stroke: var(--color-danger);
}

.nex-landing .nutshell-error  {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--color-danger) 4%, transparent);
  border: var(--border-width) solid color-mix(in srgb, var(--color-danger) 18%, transparent);
  border-radius: var(--radius-sm);
}

.nex-landing .nutshell-error__icon  {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.nex-landing .nutshell-error__icon svg  {
  stroke: var(--color-danger);
  width: 18px;
  height: 18px;
}

.nex-landing .nutshell-error__content  {
  flex: 1 1 auto;
  min-width: 0;
}

.nex-landing .nutshell-error__title  {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-bold);
  color: var(--color-danger);
  margin-bottom: var(--space-0-5);
}

.nex-landing .nutshell-error__message  {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: 0;
  line-height: 1.45;
  word-break: break-word;
}

.nex-landing .nutshell-error__retry-btn  {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
}

/* Ensure inline display: none is strictly honored */
.nex-landing [style*="display: none"],
.nex-landing .nutshell-panel [style*="display: none"],
.nex-landing .nutshell-copy-btn[style*="display: none"],
.nex-landing .nutshell-loading[style*="display: none"],
.nex-landing .nutshell-error[style*="display: none"],
.nex-landing .nutshell-text[style*="display: none"]  {
  display: none !important;
}

@keyframes nut-spin  {
  to  { transform: rotate(360deg); }
}

@keyframes nutshell-slide  {
  from  { opacity: 0; transform: translateY(6px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------------
   10. Responsive
   ------------------------------------------------------------------ */
@media (max-width: 1100px)  {
  .nex-feature__header  {
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
  .nex-about__statement  {
  padding-left: 0;
  max-width: 100%;
}
}

@media (max-width: 768px)  {
  .nex-hero__line  {
  font-size: var(--fs-display-xl);
  white-space: normal;
}
  .nex-hero__line--sm  {
  font-size: var(--fs-display-xl);
}
  .nex-hero__sculpture  {
  width: min(60vw, 300px);
}
  .nex-dark__title  {
  font-size: var(--fs-display-xl);
}
  .nex-cta__statement  {
  font-size: clamp(2.5rem, 11vw, 6rem);
  max-width: 100%;
}
  .nex-form-row  {
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
  .nex-capsule  {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-radius: 999px;
  padding: clamp(18px, 3.5vw, 32px) clamp(20px, 4vw, 40px);
  min-height: auto;
}
}

/* ============================================================
   HERO STAGE — pixel-matched to NexStudio reference
   Replaces the old .nex-hero flex layout.
   These rules apply to .nex-hero-stage and its children.
   ============================================================ */

/* Stage container — isolation:isolate creates a:not(.btn) compositing group
   so the text blend uses the shared page surface
   not the page behind it. */
.nex-hero-stage  {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--color-bg);
  isolation: isolate;
}

/*
  Hero display container — vertically and horizontally centered, responsive width.
*/
.nex-hero-display  {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  line-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(72vw, calc((100svh - 180px) * 2));
  max-width: 1220px;
  min-width: 0;
  box-sizing: border-box;
}

.nex-hero-display picture  {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.nex-hero-art-img  {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1024 / 513;
  object-fit: contain;
  pointer-events: none;
  margin: 0 auto;
}

/* Bottom micro-labels */
.nex-hero-bl,
.nex-hero-br  {
  position: absolute;
  bottom: 26px;
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  pointer-events: none;
  z-index: 3;
  white-space: nowrap;
}

.nex-hero-bl  { left: clamp(12px, 1.5vw, 30px); }
.nex-hero-br  { right: clamp(32px, 2.5vw, 52px); }

/* DEE Hero Presentation */
.nex-hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(88vw, 1100px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: auto;
}

.nex-hero-brand-title {
  font-family: var(--font-heading);
  font-size: clamp(5rem, 16vw, 12.5rem);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.04em;
  line-height: 0.85;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
  user-select: none;
}

.nex-hero-supporting {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: var(--space-4) 0 0;
}

.nex-hero-description {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 52ch;
  margin: var(--space-5) auto 0;
}

.nex-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: clamp(var(--space-6), 3vw, var(--space-10));
  flex-wrap: wrap;
}

.nex-hero-actions .btn {
  padding: var(--space-3-5) var(--space-7);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-decoration: none;
}

/* ------------------------------------------------------------------
   DEE Methodology Section
   ------------------------------------------------------------------ */
.nex-methodology {
  background: var(--color-bg);
  padding: 0 var(--pad-inline-page) clamp(var(--space-20), 10vw, 160px);
  position: relative;
}

.nex-methodology__heading {
  padding-left: max(0px, min(16.67vw, 260px));
  max-width: 80vw;
  margin: 0 0 clamp(var(--space-10), 6vw, var(--space-20));
}

.nex-methodology__title {
  font-family: var(--font-heading);
  font-size: var(--fs-display-lg);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--letter-spacing-heading);
  line-height: 0.95;
  color: var(--color-text);
  margin: 0;
  text-transform: uppercase;
}

.nex-methodology__subtitle {
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--weight-medium);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: var(--space-4) 0 0;
}

.nex-stages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--space-6), 3vw, var(--space-12));
  padding-left: max(0px, min(16.67vw, 260px));
}

.nex-stage-card {
  border-top: var(--border-width) solid var(--color-border);
  padding-top: var(--space-6);
  display: flex;
  flex-direction: column;
  position: relative;
}

.nex-stage-card__num {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: var(--weight-heavy);
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-3);
  letter-spacing: -0.03em;
}

.nex-stage-card__tag {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  display: block;
  margin-bottom: var(--space-1);
}

.nex-stage-card__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--letter-spacing-heading);
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.nex-stage-card__desc {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  margin: 0;
}

@media (max-width: 900px) {
  .nex-stages-grid {
    grid-template-columns: 1fr;
    padding-left: 0;
    gap: var(--space-8);
  }
  .nex-methodology__heading {
    padding-left: 0;
  }
}

/* Architecture Grid */
.nex-acronym-container {
  padding-left: max(0px, min(16.67vw, 260px));
  margin-top: var(--space-12);
}

.nex-acronym-title {
  font-family: var(--font-heading);
  font-size: var(--fs-heading-md);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--letter-spacing-heading);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.nex-acronym-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.nex-acronym-item {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nex-acronym-letter {
  font-family: var(--font-heading);
  font-size: var(--fs-heading-lg);
  font-weight: var(--weight-heavy);
  color: var(--color-accent);
  line-height: 1;
}

.nex-acronym-label {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.nex-acronym-note {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-4);
  line-height: var(--line-height-body);
}

@media (max-width: 900px) {
  .nex-acronym-container {
    padding-left: 0;
  }
  .nex-acronym-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .nex-acronym-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   HERO STAGE RESPONSIVE
   ============================================================ */

@media (max-width: 768px)  {
  .nex-hero-stage  {
  min-height: 460px;
}
  .nex-hero-display  {
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: calc(100% - 32px) !important;
  max-width: 520px !important;
  min-width: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
  .nex-hero-display picture  {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
  .nex-hero-art-img  {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1024 / 513 !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}
}

@media (max-width: 480px)  {
  .nex-hero-stage  {
  min-height: 380px;
}
  .nex-hero-display  {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: calc(100% - 24px) !important;
  max-width: 350px !important;
  min-width: 0 !important;
}
  .nex-hero-display picture  {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
  .nex-hero-art-img  {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}
  .nex-hero-bl,
  .nex-hero-br  {
  font-size: var(--font-size-xs);
  bottom: 16px;
}
}

@media (max-width: 820px)  {
  .nex-workspace-page .nex-summarize-page__inner,
  .nex-workspace-page .nex-summarize-page__main,
  .nex-workspace-page .nex-form-shell,
  .nex-workspace-page .nex-form-shell .summary-workspace,
  .nex-workspace-page .nex-form-shell .summary-panel--page,
  .nex-workspace-page .nex-form-shell .summary-grid  {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

  .nex-workspace-page .source-method  {
  grid-template-columns: minmax(0, 1fr) !important;
}

  .nex-workspace-page .source-method > legend,
  .nex-workspace-page .source-method > div,
  .nex-workspace-page .source-method > .source-method__options,
  .nex-workspace-page .source-method > .source-panel  {
  box-sizing: border-box;
  grid-column: 1 !important;
  grid-row: auto !important;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

  .nex-workspace-page .summary-control-hint,
  .nex-workspace-page .summary-controls-grid .style-description  {
  max-width: 100%;
  overflow-wrap: anywhere;
}
}

/* Shared analysis and output controls */
.nex-workspace-page .summary-controls-grid  {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--space-4-5), 3vw, var(--space-9));
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.nex-workspace-page .summary-controls-grid > .nex-form-row  {
  display: block;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.nex-workspace-page .summary-controls-grid > .nex-form-row:first-child  {
  border-top: 0;
}

.nex-workspace-page .summary-controls-grid .nex-form-row__label  {
  display: block;
  margin: 0 0 9px;
  padding: 0;
  color: var(--color-text);
  font: var(--weight-semibold) var(--font-size-sm)/1.35 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}

.nex-workspace-page .summary-control-field  {
  min-width: 0;
  width: 100%;
}

.nex-workspace-page .summary-select-wrap  {
  position: relative;
  min-width: 0;
  width: 100%;
}

.nex-workspace-page .summary-select-wrap::after  {
  position: absolute;
  top: 20px;
  right: 18px;
  width: 8px;
  height: 8px;
  border-right: 1.7px solid var(--color-text-muted);
  border-bottom: 1.7px solid var(--color-text-muted);
  content: '';
  pointer-events: none;
  transform: rotate(45deg);
  transition: border-color 180ms ease, transform 180ms ease;
}

.nex-workspace-page .summary-controls-grid .summary-select-wrap select  {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--control-height);
  padding: var(--space-3) 46px var(--space-3) var(--space-3-5);
  appearance: none;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
  background-image: none;
  color: var(--color-text);
  font: var(--weight-medium) var(--font-size-md)/1.4 var(--font-body);
  letter-spacing: 0;
  text-overflow: ellipsis;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.nex-workspace-page .summary-controls-grid .summary-select-wrap select:hover  {
  border-color: var(--color-border-strong);
  background-color: var(--color-bg-secondary);
}

.nex-workspace-page .summary-controls-grid .summary-select-wrap:focus-within::after  {
  border-color: var(--color-accent);
  transform: translateY(2px) rotate(225deg);
}

.nex-workspace-page .summary-controls-grid .summary-select-wrap select:focus,
.nex-workspace-page .summary-controls-grid .summary-select-wrap select:focus-visible  {
  border-color: var(--color-accent);
  outline: 0;
  box-shadow: var(--focus-ring-shadow);
}

.nex-workspace-page .summary-controls-grid .summary-select-wrap select:disabled  {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.72;
}

.nex-workspace-page .summary-controls-grid .summary-select-wrap select[aria-invalid="true"],
.nex-workspace-page .summary-controls-grid .summary-select-wrap select.is-invalid  {
  border-color: var(--color-danger);
}

.nex-workspace-page .summary-control-hint  {
  margin: 9px 0 0;
  color: var(--color-text-secondary);
  font: var(--weight-normal) var(--font-size-sm)/var(--line-height-body) var(--font-body);
}

.nex-workspace-page .summary-controls-grid .style-description  {
  max-width: 52ch;
  margin-top: 5px;
  color: var(--color-text-muted);
  font: var(--weight-normal) var(--font-size-xs)/var(--line-height-body) var(--font-body);
}

@media (max-width: 820px)  {
  .nex-workspace-page .summary-controls-grid  {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
}

/* ============================================================
   STANDALONE SUMMARIZER WORKSPACE PAGE
   Balanced, ergonomic layout with tuned whitespace & rhythm
   ============================================================ */

.nex-workspace-page  {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Page Outer Padding — eliminate huge 150px top canyon */
.nex-workspace-page .nex-summarize-page  {
  background: var(--color-bg);
  min-height: calc(100vh - 120px);
  padding: clamp(var(--space-7), 3.5vw, var(--space-12)) clamp(var(--space-5), 3.5vw, var(--space-14)) clamp(var(--space-14), 7vw, var(--space-24));
}

.nex-workspace-page .nex-summarize-page__inner  {
  max-width: 1380px;
  margin: 0 auto;
  width: 100%;
}

.nex-workspace-page .nex-summarize-page__inner--split  {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(var(--space-7), 4vw, var(--space-14));
  align-items: start;
}

.nex-workspace-page .nex-summarize-page__main  {
  min-width: 0;
}

/* Section number / label spacing */
.nex-workspace-page .nex-section-header  {
  margin-bottom: var(--space-3);
  padding-top: 0;
  border-top: none;
}

/* Workspace headline — proportional & impactful without dwarfing the workspace */
.nex-workspace-page .nex-summarize__headline  {
  font-size: var(--fs-display-xl);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--letter-spacing-heading);
  line-height: 0.92;
  margin: 0 0 clamp(var(--space-5), 2.5vw, var(--space-8));
  color: var(--color-text);
}

/* Form rows: eliminate 72px gaps, create clean ergonomic rhythm */
.nex-workspace-page .nex-form-row  {
  display: grid;
  grid-template-columns: clamp(120px, 14vw, 170px) minmax(0, 1fr);
  gap: 0 clamp(var(--space-4-5), 2.5vw, var(--space-9));
  align-items: start;
  padding: clamp(var(--space-4), 1.8vw, 22px) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.nex-workspace-page .nex-form-row:first-child  {
  border-top: var(--border-width) solid var(--color-border);
}

.nex-workspace-page .nex-form-row__label  {
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  padding-top: var(--space-1-5);
}

/* Drop zone: compact, centered, refined */
.nex-workspace-page .nex-drop-zone  {
  padding: clamp(var(--space-5), 2.5vw, var(--space-8)) clamp(var(--space-5), 2.5vw, var(--space-8));
  border-radius: var(--radius-sm);
  border: var(--border-width) solid color-mix(in srgb, var(--color-accent) 25%, transparent);
  background: color-mix(in srgb, var(--color-accent) 3%, transparent);
}

.nex-workspace-page .nex-drop-zone__icon  {
  font-size: calc(var(--font-size-md) * 1.4);
  margin-bottom: var(--space-1);
  line-height: 1;
}

.nex-workspace-page .nex-drop-zone__hint  {
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  margin: 0;
}

/* Document title input */
.nex-workspace-page .nex-form-shell input#document_title  {
  padding: var(--space-2) 0;
  font-size: var(--font-size-md);
  font-weight: var(--weight-medium);
  letter-spacing: var(--letter-spacing-heading);
}

/* Dropdown Selects */
.nex-workspace-page .nex-form-shell select  {
  padding: var(--space-2-5) var(--space-9) var(--space-2-5) var(--space-3-5);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  border: var(--border-width) solid color-mix(in srgb, var(--color-text) 12%, transparent);
  box-shadow: var(--shadow-xs);
}

.nex-workspace-page .nex-form-shell select:focus  {
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring-shadow);
}

/* Textarea */
.nex-workspace-page .nex-form-shell textarea#text  {
  min-height: 130px;
  padding: var(--space-3) var(--space-3-5);
  font-size: var(--font-size-md);
  line-height: 1.55;
  background-color: var(--color-surface);
  border: var(--border-width) solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  box-sizing: border-box;
}

.nex-workspace-page .nex-form-shell textarea#text:focus  {
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring-shadow);
}

/* Length Slider spacing */
.nex-workspace-page .length-slider__header  {
  margin-bottom: var(--space-1-5);
}

.nex-workspace-page .length-slider__ticks  {
  margin-top: var(--space-1-5);
}

/* Helper & Privacy notes */
.nex-workspace-page .nex-form-shell .privacy-note,
.nex-workspace-page .nex-form-shell .style-description  {
  font-size: var(--font-size-xs);
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  line-height: 1.45;
  margin: var(--space-1-5) 0 0;
}

.nex-workspace-page .synthesis-opt-in__choice  {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2-5);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.45;
  cursor: pointer;
}

.nex-workspace-page .synthesis-opt-in__choice input[type="checkbox"]  {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  margin: var(--space-0-75) 0 0;
  accent-color: var(--color-accent);
}

.nex-workspace-page .synthesis-opt-in__choice input[type="checkbox"]:disabled  {
  cursor: not-allowed;
}

/* Footer buttons */
.nex-workspace-page .summary-panel__footer  {
  padding-top: 22px;
  margin-top: var(--space-1);
  border-top: var(--border-width) solid var(--color-border);
}

.nex-workspace-page .summary-actions-group  {
  display: flex;
  align-items: center;
  gap: var(--space-3-5);
}

/* ============================================================
   LIGHT WORKSPACE SIDEBAR — Editorial Analytics & Activity
   ============================================================ */
.nex-sidebar-light  {
  background: transparent;
  border-left: var(--border-width) solid var(--color-border) !important;
  padding-left: clamp(var(--space-6), 3.5vw, var(--space-12)) !important;
  color: var(--color-text);
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-5) !important;
  position: sticky;
  top: 96px;
}

/* Header */
.nex-sidebar-light .analytics-sidebar__header  {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: var(--space-4) !important;
  padding-bottom: var(--space-4) !important;
  border-bottom: var(--border-width) solid var(--color-border) !important;
}

.nex-sidebar-light .sidebar-header__eyebrow  {
  display: block !important;
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--color-accent);
  margin-bottom: var(--space-1) !important;
}

.nex-sidebar-light .sidebar-header__title  {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

.nex-sidebar-light .analytics-sidebar__open  {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: var(--border-width) solid color-mix(in srgb, var(--color-text) 18%, transparent);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--color-text);
  text-decoration: none !important;
  font-size: var(--font-size-md);
  font-weight: var(--weight-bold);
  line-height: 1 !important;
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  transition: all 180ms ease !important;
  flex-shrink: 0 !important;
}

.nex-sidebar-light .analytics-sidebar__open:hover  {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
  transform: translate(2px, -2px) !important;
  box-shadow: var(--shadow-accent);
}

/* Time range filter pill bar */
.nex-sidebar-light .analytics-sidebar__filters  {
  display: inline-flex !important;
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
  border: var(--border-width) solid color-mix(in srgb, var(--color-text) 8%, transparent);
  border-radius: var(--radius-full) !important;
  padding: var(--space-0-75);
  gap: var(--space-0-5) !important;
  width: fit-content !important;
  margin: 0 0 var(--space-0-5) 0 !important;
}

.nex-sidebar-light .analytics-range  {
  cursor: pointer !important;
}

/* 2-Column KPI Cards Grid */
.nex-sidebar-light .analytics-sidebar__metrics  {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--space-2-5) !important;
  padding: 0;
  margin: 0 !important;
}

.nex-sidebar-light .analytics-sidebar__metrics > div  {
  background: var(--color-surface);
  border: var(--border-width) solid color-mix(in srgb, var(--color-text) 9%, transparent);
  border-radius: var(--radius-sm) !important;
  padding: 13px 15px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 72px !important;
  box-shadow: var(--shadow-xs);
  cursor: default !important;
}

.nex-sidebar-light .analytics-sidebar__metrics > div:hover  {
  border-color: color-mix(in srgb, var(--color-text) 9%, transparent);
  box-shadow: var(--shadow-xs);
  transform: none !important;
}

.nex-sidebar-light .analytics-sidebar__metrics strong  {
  display: block !important;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--fs-heading-md);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  margin-bottom: var(--space-1) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.nex-sidebar-light .analytics-sidebar__metrics span  {
  display: block !important;
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1.3 !important;
}

/* Chart Cards */
.nex-sidebar-light .analytics-sidebar__chart  {
  background: var(--color-surface);
  border: var(--border-width) solid color-mix(in srgb, var(--color-text) 9%, transparent);
  border-radius: var(--radius-sm) !important;
  padding: var(--space-4) var(--space-4-5) var(--space-3-5);
  margin: 0 !important;
  box-shadow: var(--shadow-xs);
}

.nex-sidebar-light .analytics-sidebar__chart h3  {
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 var(--space-3) 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.nex-sidebar-light .analytics-sidebar__chart > div  {
  height: 140px !important;
  position: relative !important;
  width: 100% !important;
}

.nex-sidebar-light .analytics-sidebar__chart canvas  {
  width: 100% !important;
  height: 100% !important;
}

.nex-sidebar-light .analytics-sidebar__empty  {
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body) !important;
  padding: var(--space-6) var(--space-4);
  text-align: center !important;
  background: var(--color-surface);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-sm) !important;
}

.nex-sidebar-light.is-loading  {
  opacity: 0.55 !important;
  pointer-events: none !important;
  transition: opacity 150ms ease !important;
}

/* ============================================================
   RESPONSIVE DESIGN — Workspace & Nutshell Mobile Optimization
   ============================================================ */

/* Tablet breakpoint (992px): Collapse 2-column workspace into single column */
@media (max-width: 992px)  {
  .nex-workspace-page .nex-summarize-page__inner--split,
  .nex-summarize-page__inner--split  {
  grid-template-columns: 1fr !important;
  gap: var(--space-10) !important;
}

  .nex-workspace-page .nex-sidebar-light,
  .nex-sidebar-light  {
  border-left: none !important;
  border-top: var(--border-width) solid var(--color-border) !important;
  padding-left: 0 !important;
  padding-top: var(--space-10) !important;
  margin-top: var(--space-9) !important;
  position: static !important;
  max-height: none !important;
  overflow-y: visible !important;
}
}

/* Tablet portrait & Large Phone (768px): Form row stacking & typography */
@media (max-width: 768px)  {
  .nex-workspace-page .nex-form-row  {
  grid-template-columns: 1fr !important;
  gap: var(--space-2) !important;
  padding: var(--space-4) 0;
}

  .nex-workspace-page .summary-controls-grid > .nex-form-row  {
  padding: 0;
  border: 0;
}

  .nex-workspace-page .nex-form-row__label  {
  padding-top: 0 !important;
  margin-bottom: var(--space-0-5) !important;
}

  .nex-workspace-page .summary-controls-grid .nex-form-row__label  {
  margin-bottom: 9px !important;
}

  .nex-workspace-page .nex-summarize__headline  {
  font-size: var(--fs-display-lg);
  line-height: 0.95 !important;
  margin-bottom: var(--space-5) !important;
}

  .nex-workspace-page .nex-summarize-page  {
  padding: clamp(var(--space-5), 3vw, var(--space-8)) clamp(var(--space-4), 3vw, var(--space-7)) clamp(var(--space-12), 6vw, 72px);
}
}

/* Mobile Devices (640px): Buttons, Nutshell card & Inputs */
@media (max-width: 640px)  {
  .nex-workspace-page .summary-actions-group  {
  flex-direction: column !important;
  width: 100% !important;
  gap: var(--space-2-5) !important;
}

  .nex-workspace-page .summary-submit-button,
  .nex-workspace-page .summary-nutshell-button  {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
}

  /* Nutshell Card Mobile Refinement */
  .nex-landing .nutshell-panel  {
  padding: var(--space-4) var(--space-3-5);
  margin-top: var(--space-4-5) !important;
}

  .nex-landing .nutshell-panel__header  {
  margin-bottom: var(--space-3) !important;
  padding-bottom: var(--space-2-5) !important;
}

  .nex-landing .nutshell-badge  {
  font-size: var(--font-size-xs);
}

  .nex-landing .nutshell-text  {
  font-size: var(--font-size-md);
  line-height: var(--line-height-body) !important;
}

  .nex-landing .nutshell-error  {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--space-2-5) !important;
  padding: var(--space-3) var(--space-3-5);
}

  .nex-landing .nutshell-error__retry-btn  {
  margin-left: 0 !important;
  width: 100% !important;
  justify-content: center !important;
}

  .nex-landing .nutshell-loading  {
  font-size: var(--font-size-sm);
  padding: var(--space-1-5) 0;
}

  .nex-workspace-page .nex-drop-zone  {
  padding: var(--space-5) var(--space-3-5);
}

  .nex-workspace-page .nex-form-shell textarea#text  {
  min-height: 110px !important;
  font-size: var(--font-size-sm);
}
}

/* Backend-driven source and summary controls */
.nex-workspace-page .summary-grid > .nex-form-row,
.nex-workspace-page .summary-grid > .settings-heading,
.nex-workspace-page .summary-grid > .settings-divider  { grid-column: 1 / -1; }
.nex-workspace-page .summary-grid .nex-form-row  { align-items: start; }
.nex-workspace-page .nex-form-row__label  { color: var(--color-text); }
.source-method, .depth-field  { border: 0; margin: 0; min-width: 0; padding-left: 0 !important; padding-right: 0 !important; }
.source-method legend, .depth-field legend  { margin: 0; padding: 0; }
.nex-workspace-page .source-method  { display: grid; grid-template-columns: clamp(120px, 14vw, 170px) minmax(0, 1fr); }
.nex-workspace-page .source-method > legend  { grid-column: 1; grid-row: 1; }
.nex-workspace-page .source-method > div  { grid-column: 2; grid-row: 1; min-width: 0; width: 100%; }
/* Stack the depth controls: fieldset legends do not participate in CSS grid. */
.nex-workspace-page .depth-field  {
  display: block;
  margin-top: var(--space-6);
  padding: 0;
}
.nex-workspace-page .depth-field > legend  { width: 100%; padding: 0 0 var(--space-3); }
.nex-workspace-page .depth-field > div  { min-width: 0; width: 100%; }
.source-method__options, .depth-options  { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
.nex-workspace-page .source-method__option  { flex: 0 0 auto; width: auto; }
.source-method__option, .depth-option  {
  cursor: pointer;
}
.source-panel  { margin-top: var(--space-3-5); min-width: 0; width: 100%; }
.source-panel[hidden]  { display: none !important; }
.nex-workspace-page .source-panel .nex-drop-zone  { box-sizing: border-box; width: 100%; }
.nex-workspace-page .summary-workspace input[type="url"]  { background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); font: var(--weight-normal) var(--font-size-md)/var(--line-height-body) var(--font-body); min-height: var(--control-height); padding: 11px var(--space-3-5); width: 100%; }
.nex-workspace-page .summary-workspace input[type="url"]:focus-visible  { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
.nex-workspace-page .privacy-note  { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.nex-workspace-page .nex-drop-zone  { min-height: 136px; }
.nex-workspace-page .nex-drop-zone__hint  { line-height: 1.65; }
.nex-workspace-page .nex-drop-zone__hint span  { color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--weight-normal); }
.nex-workspace-page .nex-drop-zone__file-row  { flex-direction: row; flex-wrap: wrap; }
.nex-workspace-page .nex-drop-zone__file-row[hidden]  { display: none !important; }
.nex-workspace-page .nex-drop-zone__replace  { cursor: pointer; position: relative; z-index: 3; }
.settings-divider  { border-top: var(--border-width) solid var(--color-border); margin-top: var(--space-1); }
.settings-heading  { color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--weight-bold); letter-spacing: .09em; margin: var(--space-5) 0 var(--space-6); text-transform: uppercase; }
.source-error  { color: var(--color-danger); font-size: var(--font-size-md); font-weight: var(--weight-semibold); margin: var(--space-2-5) 0 0; }
.source-error[hidden]  { display: none; }
.submit-status  { color: var(--color-text-secondary); font-size: var(--font-size-md); margin: 0; }
.nex-workspace-page .summary-actions-group  { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-3); width: 100%; }
.nex-workspace-page .summary-actions-group .summary-submit-button  { margin-left: 0; }

@media (max-width: 768px)  {
  .nex-workspace-page .source-panel  { grid-column: 1; }
}
@media (max-width: 640px)  {
  .nex-workspace-page .source-method__options, .nex-workspace-page .depth-options  { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nex-workspace-page .source-method__option, .nex-workspace-page .depth-option  { min-width: 0; }
  .nex-workspace-page .depth-option:last-child  { grid-column: 1 / -1; }
  .nex-workspace-page .summary-actions-group  { align-items: stretch; flex-direction: column; }
  .nex-workspace-page .summary-actions-group .summary-submit-button,
  .nex-workspace-page .summary-actions-group .summary-nutshell-button  { margin: 0; width: 100%; }
}

/* Small Handhelds (480px and below) */
@media (max-width: 480px)  {
  .nex-workspace-page .nex-summarize-page  {
  padding: var(--space-4) var(--space-3) var(--space-10);
}

  .nex-sidebar-light .analytics-sidebar__metrics  {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--space-2) !important;
}

  .nex-sidebar-light .analytics-sidebar__metrics > div  {
  padding: var(--space-2-5) var(--space-3);
  min-height: 60px !important;
}

  .nex-sidebar-light .analytics-sidebar__metrics strong  {
  font-size: var(--font-size-lg);
}

  .nex-sidebar-light .analytics-sidebar__chart > div  {
  height: 120px !important;
}

  .nex-workspace-page .nex-summarize__headline  {
  font-size: var(--fs-heading-lg);
}
}