/* ShopWriter — sistem vizual.
   Hârtie caldă, cerneală, o singură culoare de accent. Fără gradienturi,
   fără umbre moi, fără iconițe-emoji. Tot ce e „interfață” (etichete,
   butoane, navigație) e mono uppercase; tot ce e „text” e serif. */

:root {
  --paper: #f5f2ea;
  --card: #fbf9f4;
  --ink: #15120f;
  --muted: #57504a;
  --line: #ded6c8;
  --accent: #7d1f3d;
  --accent-soft: #7d1f3d14;
  --accent-ink: #5d1630;

  --ok: #2f5d42;
  --warn: #8a5a12;

  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --display: "Fraunces", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;

  --pad: 1.25rem;
  --measure: 34rem;
  --tab-h: 4.25rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Tipografie ------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 7.5vw, 3.6rem); }
h2 { font-size: clamp(1.55rem, 4.6vw, 2.3rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }
h4 { font-size: 1.02rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }

strong { font-weight: 600; }

.lede {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: var(--measure);
}

.kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 0.9rem;
}
.kicker--accent { color: var(--accent); }

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }
.tiny { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

.measure { max-width: var(--measure); }

/* Numărul mare de secțiune, ca într-un sumar tipărit */
.numar {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  border-top: 2px solid var(--accent);
  padding-top: 0.5rem;
  display: inline-block;
  margin-bottom: 1rem;
}

/* --- Structură -------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.wrap--narrow { max-width: 46rem; }

.section { padding: 3.5rem 0; }
.section + .section { border-top: 1px solid var(--line); }
.section--tight { padding: 2.25rem 0; }

.stack > * + * { margin-top: 1rem; }
.stack-sm > * + * { margin-top: 0.5rem; }
.stack-lg > * + * { margin-top: 2rem; }

.row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }

.grid { display: grid; gap: 1rem; }
@media (min-width: 46em) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Cifrele de stare stau 2×2 pe telefon — altfel panoul începe cu patru
   ecrane de derulat înainte să vezi ceva de făcut. */
.grid--stats { grid-template-columns: repeat(2, 1fr); gap: 0.65rem; }
.grid--stats .card { padding: 1rem 0.9rem; }
.grid--stats .stat__value { font-size: 2rem; }
.grid--stats .stat__label { font-size: 0.62rem; letter-spacing: 0.1em; }
@media (min-width: 46em) {
  .grid--stats { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .grid--stats .card { padding: 1.35rem; }
  .grid--stats .stat__value { font-size: 2.6rem; }
  .grid--stats .stat__label { font-size: 0.68rem; letter-spacing: 0.12em; }
}

hr.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2rem 0;
}

/* --- Antet public ----------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 40;
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
}

.logo {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.32rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}
.logo:hover { color: var(--ink); }
.logo__dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
  transform: translateY(-2px);
}

.nav {
  display: none;
  gap: 1.6rem;
  align-items: center;
}
.nav a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
@media (min-width: 52em) { .nav { display: flex; } }

.masthead__cta { display: flex; gap: 0.5rem; align-items: center; }

/* --- Butoane ---------------------------------------------------------- */

.btn {
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.72rem 1.15rem;
  border-radius: var(--r-md);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: transparent; color: var(--accent); border-color: var(--accent); }

.btn--quiet {
  background: transparent;
  color: var(--muted);
  border-color: transparent;
  padding-inline: 0.4rem;
}
.btn--quiet:hover { background: transparent; color: var(--accent); }

.btn--danger { background: transparent; color: var(--accent); border-color: var(--line); }
.btn--danger:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.btn--sm { padding: 0.5rem 0.8rem; font-size: 0.67rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* --- Carduri ---------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.35rem;
}
.card--flat { background: transparent; }
.card--accent { border-color: var(--accent); }

.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}
.card__title {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* Cifra mare de stare, cu eticheta dedesubt */
.stat { display: flex; flex-direction: column; gap: 0.15rem; }
.stat__value {
  font-family: var(--display);
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.stat__value--accent { color: var(--accent); }
.stat__label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Etichete de stare ------------------------------------------------ */

.tag {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  background: var(--paper);
}
.tag--published { border-color: #2f5d4233; color: var(--ok); background: #2f5d420d; }
.tag--awaiting { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.tag--generated { border-color: #8a5a1233; color: var(--warn); background: #8a5a120d; }
.tag--planned { border-color: var(--line); color: var(--muted); }
.tag--rejected { border-color: var(--line); color: var(--muted); text-decoration: line-through; }

/* --- Formulare -------------------------------------------------------- */

.field { display: block; margin-bottom: 1.15rem; }
.field__label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  margin-bottom: 0.45rem;
}
.field__hint {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0.4rem 0 0;
  line-height: 1.5;
}
.field__hint--above { margin: -0.15rem 0 0.55rem; }

input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="number"], textarea, select {
  width: 100%;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.72rem 0.85rem;
  line-height: 1.45;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
  appearance: none;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: #9a9188; }
textarea { min-height: 7rem; resize: vertical; }
input[type="password"], .field--mono input { font-family: var(--mono); font-size: 0.92rem; }

select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 1rem center, right 0.7rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

/* Opțiune-card: radio și checkbox cu suprafață mare, bună pe telefon */
.opt {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.opt:hover { border-color: #c9bda9; }
.opt input { margin: 0.2rem 0 0; accent-color: var(--accent); width: 1.05rem; height: 1.05rem; flex: none; }
.opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.opt--disabled { opacity: 0.45; cursor: not-allowed; }
.opt--disabled:hover { border-color: var(--line); }
.opt__body { min-width: 0; }
.opt__title {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
}
.opt__desc { font-size: 0.88rem; color: var(--muted); line-height: 1.45; display: block; margin-top: 0.15rem; }

.opts { display: grid; gap: 0.55rem; }

/* Comutator */
.switch {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.switch:last-of-type { border-bottom: 1px solid var(--line); }
.switch__text { flex: 1; min-width: 0; }
.switch__title { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; }
.switch__desc { font-size: 0.88rem; color: var(--muted); margin-top: 0.2rem; line-height: 1.45; }
.switch input { width: 2.9rem; height: 1.65rem; flex: none; margin: 0.15rem 0 0; accent-color: var(--accent); cursor: pointer; }

.error {
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
  padding: 0.75rem 0.95rem;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.94rem;
  margin-bottom: 1.25rem;
}

/* --- Feedback discret („Salvat") -------------------------------------- */

.toast {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ok);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  animation: toast-in 0.2s ease, toast-out 0.4s ease 2.4s forwards;
}
.toast__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.toast--err { color: var(--accent); }
.toast--info { color: var(--muted); }

@keyframes toast-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; } }
@keyframes toast-out { to { opacity: 0; } }

.slot { min-height: 1.1rem; display: inline-flex; align-items: center; }

/* htmx: indicator de lucru */
.htmx-indicator { opacity: 0; transition: opacity 0.15s ease; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-swapping { opacity: 0.35; transition: opacity 0.1s ease; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Panou: navigație ------------------------------------------------- */

.panel-top {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 40;
}
.panel-top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.6rem;
}
.panel-top__user {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

/* Taburi: jos pe telefon, sus pe desktop */
.tabs {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(4.5rem, 1fr);
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--card);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.7rem 0.2rem 0.65rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-top: 2px solid transparent;
  margin-top: -1px;
  position: relative;
  min-height: var(--tab-h);
}
.tab:hover { color: var(--ink); }
.tab[aria-current="page"] { color: var(--accent); border-top-color: var(--accent); background: var(--accent-soft); }
.tab__mark {
  width: 15px; height: 15px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  display: block;
}
.tab[aria-current="page"] .tab__mark { background: var(--accent); border-color: var(--accent); }
.tab__badge {
  position: absolute;
  top: 0.45rem;
  left: 50%;
  margin-left: 0.35rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.58rem;
  line-height: 1.05rem;
  text-align: center;
  letter-spacing: 0;
}

@media (min-width: 52em) {
  .tabs {
    position: static;
    display: flex;
    gap: 2rem;
    background: transparent;
    border-top: 0;
    padding: 0;
    max-width: 68rem;
    margin: 0 auto;
    padding: 0 var(--pad);
    border-bottom: 1px solid var(--line);
    overflow: visible;
  }
  .tab {
    flex-direction: row;
    min-height: 0;
    padding: 0.9rem 0;
    font-size: 0.7rem;
    letter-spacing: 0.13em;
    border-top: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
  }
  .tab[aria-current="page"] { background: transparent; border-bottom-color: var(--accent); }
  .tab__mark { display: none; }
  .tab__badge { position: static; margin: 0 0 0 0.15rem; }
}

.panel-body { padding: 1.75rem 0 calc(var(--tab-h) + 2.5rem); }
@media (min-width: 52em) { .panel-body { padding-bottom: 4rem; } }

.page-head { margin-bottom: 1.75rem; }
.page-head h1 { font-size: clamp(1.75rem, 5.5vw, 2.4rem); margin-bottom: 0.35rem; }

/* --- Bandă de impersonare (admin în contul clientului) ----------------- */

.impersonate {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.6rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.impersonate a { color: var(--paper); text-decoration: underline; }

/* --- Liste de articole ------------------------------------------------ */

.list { border-top: 1px solid var(--line); }
.item {
  border-bottom: 1px solid var(--line);
  padding: 1.15rem 0;
  display: block;
}
.item__meta {
  font-family: var(--mono);
  font-size: 0.67rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  gap: 0.55rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.item__meta .sep { color: var(--line); }
.item__title {
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0 0 0.4rem;
}
.item__title a { color: var(--ink); text-decoration: none; }
.item__title a:hover { color: var(--accent); text-decoration: underline; }

/* Motivul alegerii temei — bara verticală de citat */
.rationale {
  border-left: 2px solid var(--line);
  padding-left: 0.85rem;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0.5rem 0 0.75rem;
}
.rationale__label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.2rem;
}

.actions { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; margin-top: 0.65rem; }

/* --- Filtre ----------------------------------------------------------- */

.filters {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  margin-bottom: 0.5rem;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.filter {
  font-family: var(--mono);
  font-size: 0.67rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  background: var(--card);
}
.filter:hover { color: var(--ink); border-color: #c9bda9; }
.filter[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* --- Semnale de fact-check ------------------------------------------- */

.signals {
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  background: var(--card);
  overflow: hidden;
}
.signals__head {
  background: var(--accent-soft);
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--line);
}
.signals__title {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.3rem;
}
.signals__body { padding: 1.15rem; }
.signal { padding: 0.9rem 0; border-bottom: 1px dashed var(--line); }
.signal:first-child { padding-top: 0; }
.signal:last-child { border-bottom: 0; padding-bottom: 0; }
.signal__claim {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 0.35rem;
  quotes: "„" "”";
}
.signal__claim::before { content: open-quote; }
.signal__claim::after { content: close-quote; }
.signal__note {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0;
  padding-left: 0.85rem;
  border-left: 2px solid var(--line);
  line-height: 1.5;
}
.signal__verdict {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.3rem;
}

/* --- Preț ------------------------------------------------------------- */

.plan {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.35rem;
  position: relative;
  height: 100%;
}
.plan--rec { border-color: var(--accent); border-width: 1.5px; }
.plan__flag {
  position: absolute;
  top: -0.62rem;
  left: 1.35rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
}
.plan__name {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.85rem;
}
.plan__prefix {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 0.3rem;
}
.plan__price {
  font-family: var(--display);
  font-size: 2.9rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  flex-wrap: nowrap;      /* prețul nu se rupe niciodată pe două rânduri */
  white-space: nowrap;
}
.plan__per { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--muted); text-transform: none; }
.plan__ron { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--muted); margin-top: 0.45rem; }
.plan__tagline { font-size: 0.98rem; color: var(--muted); margin: 0.9rem 0 0; font-style: italic; }
.plan__features { list-style: none; padding: 0; margin: 1.15rem 0 1.5rem; font-size: 0.95rem; }
.plan__features li {
  padding: 0.4rem 0 0.4rem 1.15rem;
  position: relative;
  border-bottom: 1px solid var(--line);
  line-height: 1.45;
}
.plan__features li:last-child { border-bottom: 0; }
.plan__features li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.95rem;
  width: 0.45rem; height: 1px;
  background: var(--accent);
}
.plan__cta { margin-top: auto; }

/* --- Pași numerotați (pagina de integrare) ---------------------------- */

.steps { counter-reset: pas; list-style: none; padding: 0; margin: 0; }
.step {
  counter-increment: pas;
  border-top: 1px solid var(--line);
  padding: 2rem 0;
  display: grid;
  gap: 1rem;
}
.step::before {
  content: counter(pas, upper-alpha);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  border: 1px solid var(--accent);
  width: 2rem; height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 46em) {
  .step { grid-template-columns: 3rem 1fr; gap: 1.75rem; align-items: start; }
}
.step h3 { margin-bottom: 0.5rem; }

.path {
  font-family: var(--mono);
  font-size: 0.82rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.12rem 0.4rem;
  white-space: nowrap;
}

.note {
  border-left: 2px solid var(--accent);
  padding: 0.15rem 0 0.15rem 1rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}
.note strong { color: var(--ink); }

/* Bloc de cod copiabil */
.codebox { position: relative; }
.codebox pre {
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1.6;
  background: var(--ink);
  color: #e8e2d6;
  padding: 1.1rem;
  border-radius: var(--r-md);
  overflow-x: auto;
  margin: 0;
  max-height: 20rem;
  -webkit-overflow-scrolling: touch;
}
.codebox pre::-webkit-scrollbar { height: 6px; }
.codebox pre::-webkit-scrollbar-thumb { background: #4a443c; border-radius: 3px; }
.codebox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

/* --- Tabel (admin) ---------------------------------------------------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  min-width: 40rem;
}
table.data th {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  font-weight: 500;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
table.data td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data tr:hover td { background: var(--card); }
table.data a { text-decoration: none; }
table.data a:hover { text-decoration: underline; }

.dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.55rem 1.25rem; font-size: 0.94rem; margin: 0; }
.dl dt {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.18rem;
}
.dl dd { margin: 0; word-break: break-word; }

/* --- Bară de progres -------------------------------------------------- */

.meter {
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  margin: 0.55rem 0;
}
.meter__fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.3s ease; }

/* --- Gol -------------------------------------------------------------- */

.empty {
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--muted);
}
.empty__title { font-family: var(--display); font-size: 1.2rem; color: var(--ink); margin-bottom: 0.35rem; }

/* --- Subsol ----------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--line);
  padding: 2.5rem 0 3rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.foot__grid { display: grid; gap: 1.75rem; }
@media (min-width: 46em) { .foot__grid { grid-template-columns: 2fr 1fr 1fr; } }
.foot a { color: var(--muted); text-decoration: none; display: block; padding: 0.22rem 0; }
.foot a:hover { color: var(--accent); }
.foot__title {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

/* --- Detalii editoriale ----------------------------------------------- */

/* Citat mare, pe pagina principală */
.pull {
  font-family: var(--display);
  font-size: clamp(1.35rem, 4vw, 1.9rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0;
  margin: 0;
  text-wrap: balance;
}

/* Exemplu de articol, ca o pagină tipărită în miniatură */
.specimen {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.75rem 1.5rem;
  font-size: 0.95rem;
}
.specimen h4 { font-size: 1.35rem; margin-bottom: 0.15rem; }
.specimen__meta {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.specimen p { color: var(--muted); }
.specimen__product {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.75rem 0.9rem;
  background: var(--paper);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.88rem;
}
.specimen__price { font-family: var(--mono); font-size: 0.82rem; color: var(--ink); white-space: nowrap; }

/* --- Magazinul demonstrativ / articol publicat ----------------------- */

.demo-store {
  --demo-bg: #f8f4ed;
  --demo-ink: #24201d;
  --demo-sage: #526b5a;
  background: var(--demo-bg);
  color: var(--demo-ink);
}
.demo-store__wrap { width: min(72rem, calc(100% - 2.5rem)); margin-inline: auto; }
.demo-ribbon { background: #24201d; color: #f8f4ed; font-family: var(--mono); font-size: .67rem; letter-spacing: .08em; }
.demo-ribbon .demo-store__wrap { min-height: 2.35rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.demo-ribbon a { color: #f8f4ed; }
.demo-store__head { border-bottom: 1px solid #dcd4c8; background: color-mix(in srgb, var(--demo-bg) 94%, transparent); }
.demo-store__nav { min-height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.demo-store__brand { font-family: var(--display); font-size: 1.65rem; font-weight: 700; color: var(--demo-ink); text-decoration: none; }
.demo-store__brand span { color: var(--demo-sage); }
.demo-store__nav nav { display: flex; gap: 1.5rem; }
.demo-store__nav nav a { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #655d57; text-decoration: none; }
.demo-article__hero { max-width: 58rem; padding-top: clamp(3.5rem, 8vw, 7rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); text-align: center; }
.demo-article__eyebrow, .demo-products__eyebrow, .demo-article__aside-label {
  font-family: var(--mono); font-size: .67rem; line-height: 1.45; text-transform: uppercase; letter-spacing: .13em; color: var(--demo-sage); font-weight: 500;
}
.demo-article__hero h1 { font-size: clamp(2.5rem, 7vw, 5.4rem); line-height: 1; letter-spacing: -.045em; max-width: 14ch; margin: 1.25rem auto .75rem; }
.demo-article__intro { max-width: 42rem; margin-inline: auto; font-size: clamp(1.1rem, 2vw, 1.3rem); color: #655d57; }
.demo-article__byline { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; font-family: var(--mono); font-size: .65rem; letter-spacing: .07em; text-transform: uppercase; color: #7c746e; margin-top: 1.5rem; }
.demo-article__cover { min-height: clamp(20rem, 48vw, 42rem); position: relative; overflow: hidden; border-block: 1px solid #293a2f; background: #526b5a; color: #f8f4ed; display: grid; align-items: center; }
.demo-article__cover::before { content: ""; position: absolute; inset: 1.25rem; border: 1px solid rgba(248,244,237,.42); pointer-events: none; }
.demo-article__cover-copy { width: min(72rem, calc(100% - 5rem)); margin-inline: auto; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.demo-article__cover-copy > span, .demo-article__cover-copy > small { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .13em; }
.demo-article__cover-copy strong { max-width: 10ch; font-family: var(--display); font-size: clamp(3rem, 8vw, 7.2rem); font-weight: 600; line-height: .9; letter-spacing: -.045em; margin: clamp(1.25rem, 3vw, 2.5rem) 0; }
.demo-article__cover-copy small { border-top: 1px solid rgba(248,244,237,.6); padding-top: .7rem; }
.demo-article__cover-mark { position: absolute; left: max(1.25rem, calc((100% - 72rem) / 2)); bottom: 1.25rem; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; }
.demo-article__cover-number { position: absolute; right: max(2rem, calc((100% - 72rem) / 2)); top: 0; font-family: var(--display); font-size: clamp(12rem, 34vw, 34rem); line-height: .8; color: rgba(248,244,237,.08); }
.demo-article__layout { max-width: 64rem; display: grid; gap: 4rem; padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.demo-article__body { max-width: 42rem; min-width: 0; }
.demo-article__body p { color: #4f4842; }
.demo-article__body h2 { font-size: clamp(1.65rem, 3vw, 2.25rem); margin-top: 2.5rem; }
.demo-article__lead { font-size: 1.25rem; line-height: 1.6; color: var(--demo-ink) !important; }
.demo-article__note { border-block: 1px solid #cfc5b8; padding: 1.4rem 0; margin: 2.25rem 0; color: #4f4842; }
.demo-article__note span { display: block; font-family: var(--mono); font-size: .65rem; letter-spacing: .13em; text-transform: uppercase; color: var(--demo-sage); margin-bottom: .4rem; }
.demo-article__checks { list-style: none; counter-reset: demo-check; padding: 0; margin: 1.5rem 0; }
.demo-article__checks li { counter-increment: demo-check; position: relative; padding: 1.2rem 0 1.2rem 3rem; border-top: 1px solid #ded6ca; color: #4f4842; }
.demo-article__checks li:last-child { border-bottom: 1px solid #ded6ca; }
.demo-article__checks li::before { content: "0" counter(demo-check); position: absolute; left: 0; top: 1.35rem; font-family: var(--mono); font-size: .72rem; color: var(--demo-sage); }
.demo-products { margin: 3rem 0; padding: 2rem; background: #ece5db; border-radius: 2px; }
.demo-products h2 { margin-top: .4rem; }
.demo-products__grid { display: grid; gap: .75rem; margin-top: 1.5rem; }
.demo-product { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding: 1rem; background: #f8f4ed; color: var(--demo-ink); text-decoration: none; border: 1px solid #ddd4c8; }
.demo-product:hover { color: var(--demo-ink); border-color: var(--demo-sage); }
.demo-product__visual { min-height: 6rem; background: #d7ddd5; display: grid; place-items: end center; padding: .55rem; font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; color: #536057; border-radius: 48% 48% 8px 8px; }
.demo-product__visual--wash { background: #d9cec2; border-radius: 8px 8px 32% 32%; }
.demo-product__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.demo-product__copy strong { font-family: var(--display); font-size: 1.05rem; line-height: 1.2; }
.demo-product__copy small { color: #756d66; font-size: .75rem; margin: .3rem 0 .55rem; }
.demo-product__copy b { font-family: var(--mono); font-size: .78rem; }
.demo-article__sources { border-top: 1px solid #cfc5b8; padding-top: 1.25rem; margin-top: 3rem; font-size: .82rem; }
.demo-article__sources strong { display: block; font-family: var(--mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .5rem; }
.demo-article__sources a { display: block; color: #5a6d5f; margin: .35rem 0; }
.demo-article__aside { align-self: start; border-top: 3px solid var(--demo-sage); padding-top: 1.1rem; color: #655d57; font-size: .92rem; }
.demo-article__aside hr { border: 0; border-top: 1px solid #d8cfc3; margin: 1.5rem 0; }
.demo-article__verified span { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--demo-sage); margin-right: .25rem; }
.demo-store__footer { background: #24201d; color: #f8f4ed; padding: 2.5rem 0; }
.demo-store__footer .demo-store__wrap { display: flex; justify-content: space-between; gap: 1rem; color: #c8beb2; font-size: .82rem; }
.demo-store__footer strong { color: #fff; font-family: var(--display); font-size: 1.2rem; }
@media (min-width: 52em) {
  .demo-article__layout { grid-template-columns: minmax(0, 42rem) 13rem; align-items: start; }
  .demo-article__aside { position: sticky; top: 2rem; }
}
@media (max-width: 38em) {
  .demo-ribbon .demo-store__wrap { padding-block: .55rem; align-items: flex-start; }
  .demo-store__nav nav { display: none; }
  .demo-article__cover { min-height: 18rem; }
  .demo-products { margin-inline: -.6rem; padding: 1.25rem; }
  .demo-product { grid-template-columns: 4.8rem 1fr; padding: .75rem; }
  .demo-product__visual { min-height: 5.2rem; }
  .demo-store__footer .demo-store__wrap { flex-direction: column; }
}

/* --- Landing page ---------------------------------------------------- */

.landing-hero { padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(3rem, 7vw, 6rem); overflow: hidden; }
.landing-hero__grid { display: grid; gap: 3rem; align-items: center; }
.landing-hero__copy { position: relative; z-index: 2; }
.landing-hero h1 { font-size: clamp(3.2rem, 8.6vw, 6.7rem); line-height: .94; letter-spacing: -.045em; max-width: 8ch; }
.landing-hero__lede { font-size: clamp(1.12rem, 2vw, 1.35rem); color: var(--muted); max-width: 34rem; margin-top: 1.35rem; line-height: 1.55; }
.landing-hero__actions { margin-top: 2rem; }
.landing-proof { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem 1.25rem; color: var(--muted); font-size: .82rem; }
.landing-proof li { position: relative; padding-left: 1rem; }
.landing-proof li::before { content: ""; position: absolute; width: .38rem; height: .38rem; left: 0; top: .57rem; border-radius: 50%; background: var(--ok); }

.product-shot { display: block; min-width: 0; overflow: hidden; background: var(--card); border: 1px solid #cfc6b8; border-radius: 14px; box-shadow: 0 24px 70px rgba(38, 30, 24, .14); color: var(--ink); text-decoration: none; }
.product-shot:hover { color: var(--ink); border-color: #b7aa97; }
.product-shot__bar { height: 2.4rem; display: grid; grid-template-columns: 4rem 1fr auto; align-items: center; gap: .5rem; padding: 0 .8rem; background: #ebe6db; border-bottom: 1px solid #d6cec0; font-family: var(--mono); font-size: .58rem; color: #756d64; letter-spacing: .04em; }
.product-shot__bar > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-shot__bar b { color: var(--accent); text-transform: uppercase; letter-spacing: .09em; font-weight: 500; }
.product-shot__dots { display: flex; gap: .3rem; }
.product-shot__dots i { display: block; width: .48rem; height: .48rem; border-radius: 50%; background: #bbb2a4; }
.product-shot__dots i:first-child { background: var(--accent); }
.product-shot img { display: block; width: 100%; height: auto; }
.product-shot--hero { transform: rotate(1.1deg); }
.product-shot--hero img { width: 118%; max-width: none; }

.landing-strip { border-block: 1px solid var(--line); }
.landing-strip__inner { min-height: 3.5rem; display: flex; align-items: center; gap: .5rem 1.5rem; justify-content: space-between; flex-wrap: wrap; padding-block: .75rem; }
.landing-strip span { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.landing-strip span:first-child { color: var(--ok); }

.landing-heading { display: grid; gap: 1.5rem; align-items: end; margin-bottom: 3rem; }
.landing-heading h2, .landing-pricing__head h2 { max-width: 17ch; }
.landing-heading > p, .landing-pricing__head > p { color: var(--muted); max-width: 34rem; margin: 0; }
.landing-flow { display: grid; border-top: 1px solid var(--ink); }
.landing-flow__item { position: relative; padding: 1.6rem 0 1.6rem 3.25rem; border-bottom: 1px solid var(--line); }
.landing-flow__item > span { position: absolute; left: 0; top: 1.8rem; font-family: var(--mono); font-size: .68rem; color: var(--accent); }
.landing-flow__item h3 { margin-bottom: .35rem; }
.landing-flow__item p { color: var(--muted); font-size: .92rem; line-height: 1.5; }

.landing-demo { background: var(--ink); color: var(--paper); overflow: hidden; }
.landing-demo__grid { display: grid; gap: 3rem; align-items: center; }
.landing-demo .lede, .landing-demo .muted { color: #bcb3a7; }
.landing-demo__copy h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
.landing-demo__facts { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid #403a35; margin: 2rem 0; }
.landing-demo__facts div { padding: 1.1rem .75rem 1.1rem 0; }
.landing-demo__facts dt { font-family: var(--display); font-size: 2.1rem; line-height: 1; }
.landing-demo__facts dd { margin: .35rem 0 0; color: #a9a095; font-size: .75rem; line-height: 1.35; }
.landing-demo__note { margin-top: 1rem; line-height: 1.5; }
.product-shot--article { transform: rotate(-1.2deg); box-shadow: 0 28px 80px rgba(0,0,0,.45); }

.landing-control__grid { display: grid; gap: 3rem; align-items: center; }
.product-shot--control { box-shadow: 0 20px 55px rgba(48, 38, 29, .12); }
.landing-control__copy h2 { max-width: 12ch; }
.landing-control__points { margin-top: 2rem; }
.landing-control__points > div { display: grid; grid-template-columns: 2.25rem 1fr; gap: .75rem; border-top: 1px solid var(--line); padding: 1rem 0; }
.landing-control__points span { font-family: var(--mono); color: var(--accent); font-size: .67rem; padding-top: .24rem; }
.landing-control__points p { color: var(--muted); font-size: .94rem; line-height: 1.5; }
.landing-control__points strong { color: var(--ink); display: block; }

.landing-start { background: #eee9de; }
.landing-onboarding { list-style: none; counter-reset: onboarding; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--ink); }
.landing-onboarding li { counter-increment: onboarding; display: flex; flex-direction: column; min-height: 12rem; padding: 1.25rem; border-bottom: 1px solid #ccc3b5; position: relative; }
.landing-onboarding li::after { content: "0" counter(onboarding); position: absolute; right: 1.25rem; top: 1.15rem; font-family: var(--display); font-size: 2rem; color: #c3b9aa; }
.landing-onboarding span { font-family: var(--mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .13em; color: var(--accent); }
.landing-onboarding strong { font-family: var(--display); font-size: 1.2rem; line-height: 1.25; margin-top: auto; max-width: 12rem; }
.landing-onboarding small { color: var(--muted); line-height: 1.4; margin-top: .45rem; }

.landing-pricing__head { display: grid; gap: 1.5rem; align-items: end; margin-bottom: 3rem; }
.landing-plans { display: grid; gap: 1rem; align-items: stretch; }
.landing-plan { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem; }
.landing-plan--featured { border: 2px solid var(--accent); }
.landing-plan__flag { position: absolute; right: 1.1rem; top: -.7rem; background: var(--accent); color: #fff; border-radius: 4px; padding: .26rem .55rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .11em; font-size: .58rem; }
.landing-plan__name { font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; color: var(--muted); }
.landing-plan__price { font-family: var(--display); font-size: 3.1rem; font-weight: 600; line-height: 1; margin: .4rem 0 1rem; }
.landing-plan__price span { font-family: var(--mono); font-size: .68rem; font-weight: 400; letter-spacing: .06em; color: var(--muted); }
.landing-plan > p:not(.landing-plan__name) { color: var(--muted); font-size: .92rem; }
.landing-plan ul { list-style: none; margin: 1rem 0 1.5rem; padding: 0; font-size: .88rem; flex: 1; }
.landing-plan li { border-top: 1px solid var(--line); padding: .45rem 0; }
.landing-pricing__foot { text-align: center; margin-top: 1.25rem; }

.landing-faq__grid { display: grid; gap: 2.5rem; align-items: start; }
.landing-faq__grid h2 { max-width: 14ch; }
.landing-final { background: var(--card); border-top: 2px solid var(--ink); padding: clamp(4rem, 9vw, 8rem) 0; }
.landing-final__inner { display: flex; flex-direction: column; align-items: flex-start; }
.landing-final h2 { font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1; letter-spacing: -.04em; }
.landing-final p { color: var(--muted); font-size: 1.1rem; }
.landing-final .row { margin-top: 1rem; }

@media (min-width: 46em) {
  .landing-heading, .landing-pricing__head { grid-template-columns: 1.1fr .9fr; }
  .landing-flow { grid-template-columns: repeat(2, 1fr); }
  .landing-flow__item { padding: 1.8rem 1.5rem 1.8rem 3.75rem; }
  .landing-flow__item:nth-child(odd) { border-right: 1px solid var(--line); }
  .landing-onboarding { grid-template-columns: repeat(2, 1fr); }
  .landing-onboarding li:nth-child(odd) { border-right: 1px solid #ccc3b5; }
  .landing-plans { grid-template-columns: repeat(3, 1fr); }
  .landing-faq__grid { grid-template-columns: .85fr 1.15fr; }
}
@media (min-width: 62em) {
  .landing-hero__grid { grid-template-columns: .8fr 1.2fr; gap: 2rem; }
  .product-shot--hero { width: 48rem; }
  .landing-demo__grid { grid-template-columns: .72fr 1.28fr; gap: 4rem; }
  .product-shot--article { width: 46rem; }
  .landing-control__grid { grid-template-columns: 1.25fr .75fr; gap: 4.5rem; }
  .landing-onboarding { grid-template-columns: repeat(4, 1fr); }
  .landing-onboarding li { border-right: 1px solid #ccc3b5; }
  .landing-onboarding li:last-child { border-right: 0; }
}
@media (max-width: 38em) {
  .landing-hero h1 { font-size: 3.6rem; }
  .landing-hero__actions .btn { width: 100%; }
  .landing-strip__inner { display: grid; grid-template-columns: 1fr 1fr; }
  .product-shot { border-radius: 9px; }
  .product-shot__bar { grid-template-columns: 3.2rem 1fr; }
  .product-shot__bar b { display: none; }
  .landing-demo__facts dd { font-size: .68rem; }
}

/* --- Demo interactiv ------------------------------------------------- */

.tour-intro { padding: clamp(2.75rem, 6vw, 5rem) 0; border-bottom: 1px solid var(--line); }
.tour-intro__inner { display: grid; gap: 1.75rem; align-items: end; }
.tour-intro h1 { max-width: 13ch; font-size: clamp(2.65rem, 6vw, 5.2rem); line-height: .98; letter-spacing: -.04em; }
.tour-intro__copy { max-width: 34rem; justify-self: end; }
.tour-intro__copy > p:first-child { font-size: 1.12rem; color: var(--muted); line-height: 1.55; }

.tour-section { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(4rem, 8vw, 7rem); }
.demo-tour { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; max-width: 82rem; }
.demo-tour__rail { position: sticky; top: 5.25rem; border-top: 1px solid var(--ink); }
.demo-tour__step { display: grid; grid-template-columns: 1.75rem 1fr; column-gap: .55rem; padding: .9rem .6rem .9rem 0; border-bottom: 1px solid var(--line); color: var(--muted); text-decoration: none; }
.demo-tour__step:hover { color: var(--ink); }
.demo-tour__step > span { grid-row: 1 / 3; font-family: var(--mono); font-size: .65rem; color: var(--accent); padding-top: .12rem; }
.demo-tour__step strong { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: inherit; }
.demo-tour__step small { font-size: .73rem; line-height: 1.25; color: var(--muted); }
.demo-tour__step[aria-current="step"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); color: var(--ink); padding-left: .7rem; }

.demo-tour__stage { min-width: 0; scroll-margin-top: 4.75rem; }
.demo-notice { min-height: 2.6rem; display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; border: 1px solid #cfc6b8; border-bottom: 0; border-radius: 10px 10px 0 0; background: #ebe6db; font-family: var(--mono); font-size: .68rem; letter-spacing: .035em; color: var(--muted); }
.demo-notice strong { color: var(--ink); text-transform: uppercase; letter-spacing: .09em; }
.demo-notice__dot { width: .46rem; height: .46rem; border-radius: 50%; background: var(--ok); flex: none; }

.demo-app { border: 1px solid #cfc6b8; background: #eee9de; box-shadow: 0 18px 48px rgba(38,30,24,.12); overflow: hidden; }
.demo-app__topbar { min-height: 3.4rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 0 1rem; border-bottom: 1px solid #d2cabc; background: var(--paper); }
.demo-app__brand { font-family: var(--display); font-weight: 600; font-size: 1.05rem; display: flex; align-items: baseline; gap: .25rem; }
.demo-app__brand > span { width: .35rem; height: .35rem; border-radius: 50%; background: var(--accent); }
.demo-app__store { font-family: var(--mono); font-size: .7rem; color: var(--muted); letter-spacing: .06em; }
.demo-app__user { justify-self: end; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border: 1px solid var(--ink); border-radius: 50%; font-family: var(--mono); font-size: .6rem; }
.demo-app__body { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); min-height: 43rem; }
.demo-app__sidebar { border-right: 1px solid #d2cabc; background: #e7e0d4; padding: 1.2rem .75rem; display: flex; flex-direction: column; gap: .25rem; }
.demo-app__sidebar > span, .demo-app__sidebar > button { padding: .55rem .65rem; border: 0; border-left: 2px solid transparent; background: transparent; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; line-height: 1.4; text-align: left; text-transform: uppercase; color: #706860; }
.demo-app__sidebar > button { cursor: pointer; }
.demo-app__sidebar > button:hover { color: var(--ink); }
.demo-app__sidebar > button.is-active { background: var(--paper); border-left-color: var(--accent); color: var(--ink); }
.demo-app__sidebar > button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.demo-app__sidebar > .demo-app__sidebar-disabled { color: #9a9186; }
.demo-app__sidebar .demo-app__sidebar-label { color: #9a9186; font-size: .65rem; padding-bottom: .85rem; }
.demo-noscript { margin-bottom: .75rem; border: 1px solid var(--accent); padding: .8rem 1rem; background: var(--accent-soft); font-size: .85rem; }
.demo-app__main { min-width: 0; padding: clamp(1.25rem, 3vw, 2.2rem); background: var(--paper); }
.demo-scene { min-width: 0; }
.demo-scene[hidden] { display: none !important; }
.demo-scene__head { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; margin-bottom: 1.6rem; }
.demo-scene__head .kicker { margin-bottom: .45rem; }
.demo-scene__head h2 { font-size: clamp(1.7rem, 3.4vw, 2.65rem); margin-bottom: .35rem; }
.demo-scene__head p { max-width: 40rem; color: var(--muted); font-size: .92rem; line-height: 1.45; margin: 0; }

.demo-state { display: inline-flex; align-items: center; gap: .34rem; width: max-content; max-width: 100%; border: 1px solid var(--line); border-radius: 999px; padding: .25rem .52rem; font-family: var(--mono); font-size: .65rem; font-weight: 500; line-height: 1.25; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; color: var(--muted); background: var(--card); }
.demo-state i { display: block; width: .38rem; height: .38rem; border-radius: 50%; background: currentColor; }
.demo-state--ok, .demo-state--published { color: var(--ok); border-color: #2f5d4240; background: #2f5d420b; }
.demo-state--review, .demo-state--planned { color: var(--accent); border-color: #7d1f3d3d; background: var(--accent-soft); }
.demo-state--uncovered { color: var(--warn); border-color: #8a5a1240; background: #8a5a120b; }
.demo-state--out, .demo-state--muted { color: #7b736b; background: #e9e4db; }
.demo-sync { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }

.demo-connect-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: .9rem; }
.demo-card { border: 1px solid var(--line); background: var(--card); padding: 1.15rem; min-width: 0; }
.demo-card--selected { border-top: 3px solid var(--ok); }
.demo-card__label { font-family: var(--mono); font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); margin-bottom: .8rem; }
.demo-platform { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: .75rem; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.demo-platform__mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--ink); font-family: var(--mono); font-size: .66rem; font-weight: 500; }
.demo-platform strong, .demo-platform small { display: block; }
.demo-platform strong { font-size: .96rem; }
.demo-platform small { color: var(--muted); font-size: .72rem; }
.demo-platform-list { display: grid; }
.demo-platform-list > span { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .72rem 0; border-top: 1px solid var(--line); }
.demo-platform-list > span:first-child { border-top: 0; }
.demo-platform-list b { font-size: .87rem; }
.demo-platform-list small { font-family: var(--mono); font-size: .65rem; text-transform: uppercase; color: var(--muted); }
.demo-definition { margin: .25rem 0 0; }
.demo-definition > div { display: grid; grid-template-columns: 8.3rem 1fr; gap: .75rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.demo-definition > div:first-child { border-top: 0; }
.demo-definition dt { font-family: var(--mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.demo-definition dd { margin: 0; font-size: .81rem; line-height: 1.35; color: var(--ink); }
.demo-explainer { margin-top: 1rem; border-left: 2px solid var(--accent); padding: .85rem 1rem; background: var(--accent-soft); }
.demo-explainer strong { display: block; font-family: var(--mono); font-size: .61rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .2rem; }
.demo-explainer p { margin: 0; color: var(--muted); font-size: .83rem; line-height: 1.45; }

.demo-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); margin-bottom: 1.1rem; }
.demo-stats > div { padding: .9rem; border-right: 1px solid var(--line); }
.demo-stats > div:first-child { padding-left: 0; }
.demo-stats > div:last-child { border-right: 0; }
.demo-stats strong, .demo-stats span { display: block; }
.demo-stats strong { font-family: var(--display); font-size: 1.75rem; line-height: 1; }
.demo-stats span { font-family: var(--mono); font-size: .55rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; }
.demo-filterbar { display: flex; gap: .35rem; margin-bottom: .75rem; overflow-x: auto; padding-bottom: .2rem; }
.demo-filterbar button { border: 1px solid var(--line); background: transparent; color: var(--muted); padding: .45rem .7rem; border-radius: 999px; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.demo-filterbar button[aria-pressed="true"] { color: #fff; background: var(--ink); border-color: var(--ink); }
.demo-table-wrap { max-height: 31rem; overflow: auto; border-bottom: 1px solid var(--line); }
.demo-table { width: 100%; min-width: 43rem; border-collapse: collapse; font-size: .78rem; }
.demo-table tr[hidden] { display: none !important; }
.demo-table th { position: sticky; top: 0; z-index: 1; padding: .55rem .7rem; border-block: 1px solid var(--line); text-align: left; font-family: var(--mono); font-size: .64rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); background: var(--paper); font-weight: 400; }
.demo-table td { padding: .72rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.demo-table th:first-child, .demo-table td:first-child { padding-left: 0; }
.demo-table td strong, .demo-table td small { display: block; }
.demo-table td strong { font-size: .82rem; line-height: 1.25; }
.demo-table td small { color: var(--muted); font-family: var(--mono); font-size: .62rem; margin-top: .17rem; }
.demo-empty { padding: 2rem; text-align: center; color: var(--muted); font-size: .85rem; }

.demo-plan-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1rem; align-items: start; }
.demo-calendar { border-top: 1px solid var(--ink); }
.demo-calendar__item { display: grid; grid-template-columns: 4rem 1fr; gap: .9rem; padding: 1rem .7rem; border-bottom: 1px solid var(--line); }
.demo-calendar__item--active { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.demo-calendar__item time { display: grid; grid-template-columns: auto 1fr; gap: 0 .35rem; align-items: baseline; font-family: var(--mono); }
.demo-calendar__item time strong { font-family: var(--display); font-size: 1.65rem; line-height: 1; }
.demo-calendar__item time span { font-size: .57rem; text-transform: uppercase; color: var(--muted); }
.demo-calendar__item time small { grid-column: 1 / -1; font-size: .5rem; text-transform: uppercase; color: var(--muted); }
.demo-calendar__item h3 { font-size: .95rem; margin: .4rem 0 .2rem; line-height: 1.25; }
.demo-calendar__item p { margin: 0; color: var(--muted); font-size: .7rem; }
.demo-brief { padding: 1.2rem; border: 1px solid var(--line); border-top: 3px solid var(--accent); background: var(--card); }
.demo-brief__number { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.demo-brief h3 { font-size: 1.35rem; margin: .65rem 0 1rem; }
.demo-brief .demo-definition > div { grid-template-columns: 7rem 1fr; }

.demo-editor { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(16rem, .9fr); border: 1px solid var(--line); min-height: 31rem; }
.demo-editor__document { padding: clamp(1.2rem, 3vw, 2rem); background: #fffdf8; border-right: 1px solid var(--line); }
.demo-editor__meta { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.demo-editor__document h3 { font-size: clamp(1.55rem, 3vw, 2.25rem); margin: .75rem 0; }
.demo-editor__document h4 { margin-top: 1.45rem; }
.demo-editor__document p { font-size: .86rem; line-height: 1.5; color: #514a44; }
.demo-editor__lead { font-size: 1rem !important; color: var(--ink) !important; }
.demo-editor__products { display: grid; gap: .5rem; margin-top: 1.5rem; }
.demo-editor__product { padding: .8rem; border: 1px solid var(--line); display: grid; font-size: .75rem; }
.demo-editor__product > span { font-family: var(--mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.demo-editor__product strong { margin-top: .2rem; }
.demo-editor__product b { font-family: var(--mono); font-size: .64rem; font-weight: 400; color: var(--muted); }
.demo-review { padding: 1rem; background: #eee9de; }
.demo-review__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid #cfc6b8; }
.demo-review__head span { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.demo-review__head strong { font-size: .78rem; }
.demo-claim { padding: .8rem 0; border-bottom: 1px solid #cfc6b8; }
.demo-claim summary { cursor: pointer; list-style: none; font-size: .78rem; line-height: 1.4; }
.demo-claim summary::-webkit-details-marker { display: none; }
.demo-claim summary .demo-state { margin-bottom: .4rem; }
.demo-claim summary::after { content: "+"; float: right; font-family: var(--mono); color: var(--accent); }
.demo-claim[open] summary::after { content: "−"; }
.demo-claim > div { padding: .55rem .7rem; margin-top: .55rem; background: var(--card); border-left: 2px solid var(--ok); }
.demo-claim p { font-size: .75rem; margin: 0; }
.demo-claim small { display: block; font-size: .66rem; line-height: 1.35; color: var(--muted); margin-top: .3rem; }
.demo-rule-check { padding: .85rem 0; display: flex; flex-direction: column; }
.demo-rule-check > span { font-family: var(--mono); font-size: .56rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.demo-rule-check strong { font-size: .8rem; color: var(--ok); }
.demo-rule-check small { font-size: .67rem; line-height: 1.35; color: var(--muted); margin-top: .2rem; }
.demo-review__outcome { margin: .2rem 0 0; padding: .7rem; border-left: 2px solid var(--ok); background: var(--card); color: var(--muted); font-size: .75rem; line-height: 1.4; }

.demo-publish-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1rem; align-items: start; }
.demo-fields { display: grid; gap: .8rem; }
.demo-fields label { display: grid; gap: .28rem; }
.demo-fields label > span { font-family: var(--mono); font-size: .65rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.demo-fields input, .demo-fields textarea { width: 100%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 4px; padding: .62rem .7rem; font: .82rem/1.35 var(--serif); resize: none; }
.demo-fields__row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.demo-input-prefix { display: flex; align-items: stretch; min-width: 0; }
.demo-input-prefix small { display: flex; align-items: center; border: 1px solid var(--line); border-right: 0; padding: 0 .55rem; background: #e9e4db; color: var(--muted); font-family: var(--mono); font-size: .62rem; white-space: nowrap; }
.demo-input-prefix input { min-width: 8rem; border-radius: 0 4px 4px 0; }
.demo-publish-action { display: flex; justify-content: space-between; align-items: center; gap: .75rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.demo-publish-action > span:first-child { color: var(--muted); font-size: .76rem; line-height: 1.35; }
.demo-publish-action > span:first-child strong { display: block; color: var(--ink); }
.demo-serp { border: 1px solid var(--line); padding: 1.2rem; background: #fff; }
.demo-serp__label { display: block; font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem; }
.demo-serp > small { display: block; color: #3c4043; font: .62rem Arial, sans-serif; }
.demo-serp > strong { display: block; color: #1a0dab; font: 1rem/1.3 Arial, sans-serif; font-weight: 400; margin: .25rem 0; }
.demo-serp > p { color: #4d5156; font: .69rem/1.45 Arial, sans-serif; }
.demo-serp hr { border: 0; border-top: 1px solid var(--line); margin: 1.1rem 0; }
.demo-serp .demo-definition > div { grid-template-columns: 7rem 1fr; }

.demo-scene--result { min-height: 34rem; display: flex; flex-direction: column; justify-content: center; }
.demo-result { display: grid; grid-template-columns: 8rem 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; max-width: 47rem; margin: auto; }
.demo-result__stamp { font-family: var(--display); font-size: 7.5rem; line-height: .8; color: var(--accent); border-top: 3px solid var(--accent); padding-top: .65rem; }
.demo-result h2 { font-size: clamp(2rem, 5vw, 3.6rem); max-width: 12ch; }
.demo-result p { max-width: 35rem; color: var(--muted); font-size: .95rem; }
.demo-result__url { display: block; border-block: 1px solid var(--line); padding: .8rem 0; overflow-wrap: anywhere; font-family: var(--mono); font-size: .7rem; color: var(--ink); text-decoration: none; }
.demo-result__url span { color: var(--muted); }
.demo-result__actions { margin-top: 1.2rem; }
.demo-recap { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 2rem; border-top: 1px solid var(--line); }
.demo-recap span { padding: .7rem .55rem; border-right: 1px solid var(--line); font-size: .67rem; color: var(--muted); }
.demo-recap span:last-child { border-right: 0; }
.demo-recap b { display: block; font-family: var(--mono); font-size: .55rem; color: var(--ok); }

.demo-tour__controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; padding-top: 1rem; }
.demo-tour__controls > button:last-child { justify-self: end; }
.demo-tour__controls > span { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.demo-tour__controls > span b { color: var(--ink); }

.tour-after { padding: clamp(3.5rem, 8vw, 7rem) 0; border-top: 1px solid var(--line); background: var(--card); }
.tour-after__inner { display: grid; gap: 2rem; align-items: end; }
.tour-after h2 { max-width: 17ch; font-size: clamp(2rem, 4vw, 3.3rem); }
.tour-after__inner > div:last-child { max-width: 31rem; justify-self: end; }
.tour-after__inner p { color: var(--muted); }

@media (min-width: 50em) {
  .tour-intro__inner, .tour-after__inner { grid-template-columns: 1.1fr .9fr; }
}

@media (max-width: 66em) {
  .demo-tour { grid-template-columns: 1fr; }
  .demo-tour__rail { position: static; display: flex; overflow-x: auto; border-top: 0; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
  .demo-tour__step { flex: 0 0 9.5rem; border-top: 1px solid var(--line); border-bottom: 0; }
  .demo-tour__step[aria-current="step"] { box-shadow: inset 0 3px 0 var(--accent); padding-left: .6rem; }
}

@media (max-width: 48em) {
  .tour-intro h1 { font-size: 3rem; }
  .demo-notice { align-items: flex-start; flex-wrap: wrap; }
  .demo-notice > span:last-child { flex-basis: calc(100% - 1rem); margin-left: .95rem; }
  .demo-app__topbar { grid-template-columns: 1fr auto; }
  .demo-app__store { display: none; }
  .demo-app__body { display: block; min-height: 0; }
  .demo-app__sidebar { border-right: 0; border-bottom: 1px solid #d2cabc; padding: .5rem; flex-direction: row; overflow-x: auto; }
  .demo-app__sidebar > span, .demo-app__sidebar > button { flex: 0 0 auto; padding: .45rem .55rem; border-left: 0; border-bottom: 2px solid transparent; }
  .demo-app__sidebar > span:not(.is-active), .demo-app__sidebar > button:not(.is-active) { display: none; }
  .demo-app__sidebar > button.is-active { border-bottom-color: var(--accent); }
  .demo-app__sidebar > button.is-active::before { content: "Panou / "; color: var(--muted); }
  .demo-app__sidebar .demo-app__sidebar-label { display: none; }
  .demo-app__main { padding: 1rem .85rem 1.25rem; }
  .demo-scene__head { display: grid; gap: .8rem; }
  .demo-scene__head > .demo-state, .demo-scene__head > .demo-sync { grid-row: 1; }
  .demo-connect-grid, .demo-plan-grid, .demo-editor, .demo-publish-grid { grid-template-columns: 1fr; }
  .demo-editor__document { border-right: 0; border-bottom: 1px solid var(--line); }
  .demo-stats { grid-template-columns: repeat(2, 1fr); }
  .demo-stats > div:nth-child(2) { border-right: 0; }
  .demo-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .demo-stats > div:nth-child(3) { padding-left: 0; }
  .demo-table { min-width: 0; }
  .demo-table thead { display: none; }
  .demo-table tbody { display: grid; }
  .demo-table tr { display: grid; grid-template-columns: 1fr auto; gap: .35rem .8rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .demo-table td { padding: 0; border: 0; }
  .demo-table td:first-child { grid-column: 1 / -1; }
  .demo-table td:nth-child(2)::before { content: "Preț: "; color: var(--muted); }
  .demo-table td:nth-child(3)::before { content: "Stoc: "; color: var(--muted); }
  .demo-table td:nth-child(4) { grid-column: 1 / -1; }
  .demo-fields__row { grid-template-columns: 1fr; }
  .demo-fields input, .demo-fields textarea { font-size: 1rem; }
  .demo-input-prefix { display: grid; }
  .demo-input-prefix small { min-height: 2rem; border-right: 1px solid var(--line); border-bottom: 0; white-space: normal; }
  .demo-input-prefix input { border-radius: 0 0 4px 4px; }
  .demo-publish-action { align-items: stretch; flex-direction: column; }
  .demo-result { grid-template-columns: 1fr; }
  .demo-result__stamp { font-size: 4rem; width: 5rem; }
  .demo-recap { grid-template-columns: 1fr 1fr; }
  .demo-recap span { border-bottom: 1px solid var(--line); }
  .demo-tour__controls .btn { padding-inline: .75rem; max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 27em) {
  .tour-intro h1 { font-size: 2.55rem; }
  .demo-tour__step { flex-basis: 7.25rem; grid-template-columns: 1.25rem 1fr; }
  .demo-tour__step small { display: none; }
  .demo-platform { grid-template-columns: 2.25rem 1fr; }
  .demo-platform > .demo-state { grid-column: 2; }
  .demo-definition > div, .demo-brief .demo-definition > div, .demo-serp .demo-definition > div { grid-template-columns: 1fr; gap: .15rem; }
  .demo-tour__controls { grid-template-columns: 1fr 1fr; }
  .demo-tour__controls > span { grid-row: 1; grid-column: 1 / -1; text-align: center; }
  .demo-tour__controls > button { width: 100%; max-width: none; }
}

.checklist { list-style: none; padding: 0; margin: 0; font-size: 0.94rem; }
.checklist li {
  display: flex;
  gap: 0.65rem;
  align-items: baseline;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
}
.checklist li:last-child { border-bottom: 0; }
.checklist__box {
  width: 0.7rem; height: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  flex: none;
  display: inline-block;
}
.checklist__box--on { background: var(--accent); border-color: var(--accent); }

details.acc { border-bottom: 1px solid var(--line); padding: 1rem 0; }
details.acc summary {
  cursor: pointer;
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after { content: "+"; font-family: var(--mono); color: var(--accent); font-size: 1.1rem; }
details.acc[open] summary::after { content: "–"; }
details.acc .acc__body { padding-top: 0.75rem; color: var(--muted); max-width: var(--measure); }

.hidden { display: none !important; }

/* =========================================================================
   PLAN — calendarul de 30 de zile
   Nu e o grilă lunară, ci o coloană de zile: se citește ca un jurnal și
   încape pe telefon fără să se strângă.
   ========================================================================= */

.row--wrap { flex-wrap: wrap; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  user-select: none;
}
.chip input { width: 0.95rem; height: 0.95rem; margin: 0; accent-color: var(--accent); }
.chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.select--ora { width: auto; min-width: 7rem; }

.calendar { border-top: 1px solid var(--line); }

.calendar__zi {
  display: grid;
  grid-template-columns: 4.25rem 1fr;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.calendar__zi--liber { opacity: 0.55; }
.calendar__zi--azi { background: var(--accent-soft); margin-inline: -0.75rem; padding-inline: 0.75rem; }

.calendar__data { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.calendar__numar { font-family: var(--display); font-size: 1.35rem; line-height: 1; }
.calendar__nume {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.calendar__luna {
  flex-basis: 100%;
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.calendar__continut { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }

.calendar__articol { display: block; text-decoration: none; color: inherit; }
.calendar__articol:hover .calendar__titlu { color: var(--accent); }
.calendar__titlu { display: block; font-weight: 600; line-height: 1.35; }
.calendar__meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.35rem; font-size: 0.8rem; }
.calendar__motiv {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 52ch;
}
.calendar__gol {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* =========================================================================
   CATALOG
   ========================================================================= */

.meter--sm { height: 0.35rem; }
.num-col { text-align: right; white-space: nowrap; }

.produs {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.75rem 1.25rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.produs__nume { min-width: 0; }
.produs__nume a { color: inherit; text-decoration: none; }
.produs__nume a:hover { color: var(--accent); text-decoration: underline; }
.produs__meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.3rem; font-size: 0.78rem; color: var(--muted); }
.produs__pret { font-family: var(--mono); font-size: 0.85rem; white-space: nowrap; }
.produs__acoperire { display: flex; align-items: center; gap: 0.5rem; justify-content: flex-end; white-space: nowrap; }

@media (max-width: 40em) {
  .produs { grid-template-columns: 1fr auto; }
  .produs__acoperire { grid-column: 1 / -1; justify-content: flex-start; }
  .calendar__zi { grid-template-columns: 3.25rem 1fr; gap: 0.75rem; }
}

/* =========================================================================
   ÎNSCRIEREA ÎN PAȘI
   Numerele sunt vizibile tot timpul: omul vede unde e și cât a mai rămas.
   ========================================================================= */

.pasi {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--line);
  list-style: none;
  counter-reset: none;
}

.pasi__pas {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.pasi__numar {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 0.72rem;
  letter-spacing: 0;
  flex: none;
}

.pasi__pas--activ { color: var(--ink); }
.pasi__pas--activ .pasi__numar { border-color: var(--accent); background: var(--accent); color: var(--paper); }
.pasi__pas--gata .pasi__numar { border-color: var(--accent); color: var(--accent); }

@media (max-width: 34em) {
  .pasi { gap: 0.9rem; }
  .pasi__eticheta { display: none; }
}

/* Subiectele propuse la înscriere — numerotate, ca o listă de sumar. */

.propunere {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.propunere__numar {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding-top: 0.2rem;
}
.propunere__titlu { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.propunere__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.propunere__motiv {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 48ch;
}