/* ==========================================================================
   NAUTILUS — NEMO page · Section 4: Products and licensing
   Theme variables with fallbacks. Prefix nm-.
   ========================================================================== */

.nm-lic{
  --nm-wine: var(--theme-color, #79182d);
  --nm-head: var(--heading-color, #000);
  --nm-text: var(--font-color, #5c5c5c);
  --nm-line: var(--border-color, #dcdcdc);
  --nm-hfont: var(--heading-font, 'Exo 2', sans-serif);
  --nm-bfont: var(--body-font, 'Exo 2', sans-serif);
  --nm-hw: var(--font-weight-heading, 600);
  --nm-ease: cubic-bezier(.16, 1, .3, 1);
  --nm-ink: #111216;                       /* Operations panel */
  --nm-ink-line: rgba(255,255,255,.10);
  --nm-pink: #FF9DB6;                      /* accents on the dark panel */
  scroll-margin-top: 100px;
}
.nm-lic-intro{ max-width: 700px; margin: 18px 0 0; color: var(--nm-text); }

.nm-kick{
  display: inline-block; margin-bottom: 8px;
  font-family: var(--nm-hfont); font-weight: var(--nm-hw);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #9a9aa4;
}
.nm-kick--wine{ color: var(--nm-wine); }

/* ===================== 4a · comparison grid ===================== */
.nm-cmp-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }

.nm-cmp{
  display: grid;
  grid-template-columns: minmax(130px, .9fr) repeat(4, minmax(170px, 1fr));
  column-gap: 14px;
  min-width: 900px;                        /* scrolls sideways on phones, see below */
}
.nm-cmp { grid-template-rows: repeat(6, auto); }

/* explicit placement: the column backgrounds span every row */
.c1{ grid-column: 1; } .c2{ grid-column: 2; } .c3{ grid-column: 3; } .c4{ grid-column: 4; } .c5{ grid-column: 5; }
.cs{ grid-column: 3 / 6; }
.r1{ grid-row: 1; } .r2{ grid-row: 2; } .r3{ grid-row: 3; } .r4{ grid-row: 4; }
.r5{ grid-row: 5; } .r6{ grid-row: 6; } 

.nm-cmp .nm-bg-des{ grid-column: 2; grid-row: 1 / -1; }
.nm-cmp .nm-bg-ops{ grid-column: 3 / 6; grid-row: 1 / -1; }

/* Design: a light card — Operations: one dark panel holding the three tiers */
.nm-bg-des{ background: #fff; border: 1px solid var(--nm-line); border-radius: 14px; }
.nm-bg-ops{
  border-radius: 14px; background: var(--nm-ink);
  background-image: radial-gradient(120% 70% at 100% 0%, rgba(121,24,45,.55), transparent 60%);
  box-shadow: 0 24px 50px -24px rgba(17,18,22,.55);
}
.nm-cmp > :not(.nm-bg-des):not(.nm-bg-ops){ position: relative; z-index: 1; }

/* headers */
.nm-h-des{ grid-column: 2; grid-row: 1 / 3; padding: 26px 22px 20px; }
.nm-h-ops{ grid-column: 3 / 6; grid-row: 1; padding: 26px 22px 6px; color: #fff; }
.nm-h-des h3, .nm-h-ops h3{
  margin: 0 0 6px; font-family: var(--nm-hfont); font-weight: var(--nm-hw);
  font-size: 22px; line-height: 1.15; text-transform: none;
}
.nm-h-des h3{ color: var(--nm-head); }
.nm-h-ops h3{ color: #fff; }
.nm-h-des p{ margin: 0; font-size: 14.5px; color: var(--nm-text); }
.nm-h-ops p{ margin: 0; font-size: 14.5px; color: rgba(255,255,255,.62); }
.nm-h-ops .nm-kick{ color: var(--nm-pink); }
.nm-up{ color: var(--nm-pink); text-decoration: none; border-bottom: 1px solid rgba(255,157,182,.45); }
.nm-up:hover{ border-bottom-color: currentColor; }

.nm-tier{ grid-row: 2; padding: 16px 22px 22px; color: #fff; }
.nm-tier[data-t="0"]{ grid-column: 3; } .nm-tier[data-t="1"]{ grid-column: 4; } .nm-tier[data-t="2"]{ grid-column: 5; }
.nm-tier h4{
  margin: 0 0 10px; font-family: var(--nm-hfont); font-weight: var(--nm-hw);
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.nm-tier strong{ display: block; margin-top: 12px; font-family: var(--nm-hfont); font-weight: var(--nm-hw);
  font-size: 17px; line-height: 1.25; color: #fff; }
.nm-sig{ display: inline-block; margin-top: 8px; font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--nm-pink); }

/* mini stack: CORE · API · FLOW · WEB from the bottom; included = filled, excluded = dashed */
.nm-ministack{ width: 64px; height: 70px; display: block; overflow: visible; }
.nm-ms--on .t{ fill: var(--nm-pink); }
.nm-ms--on .s{ fill: #c46b84; } .nm-ms--on .s2{ fill: #a9526b; }
.nm-ms--off polygon{ fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1; stroke-dasharray: 2.5 2.5; }

/* data rows */
.nm-r-lab{
  padding: 18px 12px 18px 0; align-self: stretch; border-top: 1px solid var(--nm-line);
  font-family: var(--nm-hfont); font-weight: var(--nm-hw);
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #8a8a94;
}
.nm-r-des{
  padding: 18px 22px; border-top: 1px solid var(--nm-line);
  font-size: 15px; line-height: 1.5; color: var(--nm-head);
}
.nm-r-ops{
  padding: 18px 22px;
  font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.86);
}
/* row rule on the dark panel: drawn as a pseudo-element that also covers the gaps
   between the tier columns, so the line never breaks */
.nm-r-ops::after{
  content: ""; position: absolute; top: 0; left: -7px; right: -7px; height: 1px; background: var(--nm-ink-line);
}
.nm-r-ops.c3::after, .nm-r-span::after{ left: 0; }
.nm-r-ops.c5::after, .nm-r-span::after{ right: 0; }
/* centre content vertically when a neighbouring cell wraps onto more lines */
.nm-r-span{ display: flex; flex-direction: column; align-items: center; justify-content: center; }
.nm-r-des{ display: flex; flex-direction: column; justify-content: center; }
.nm-r-span{ text-align: center; }
.nm-r-span b{ color: #fff; font-weight: var(--nm-hw); }
/* merged cells read as one band across the three tiers (a soft tint, never a line through the text) */
.nm-r-span{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.045) 12%, rgba(255,255,255,.045) 88%, transparent); }

/* ===================== phones: two stacked cards instead of a wide table ===================== */
@media (max-width: 767px){
  .nm-cmp-scroll{ overflow: visible; }
  .nm-cmp{ display: flex; flex-direction: column; min-width: 0; }
  .nm-bg-des, .nm-bg-ops, .nm-r-lab{ display: none; }

  /* order: Design card, then the Operations card with each tier and its "best for" */
  .nm-h-des{ order: 1; } .nm-r-des{ order: 2; }
  .nm-h-ops{ order: 3; } .nm-r-span{ order: 4; }
  .nm-tier[data-t="0"]{ order: 5; } .nm-r-ops.c3{ order: 6; }
  .nm-tier[data-t="1"]{ order: 7; } .nm-r-ops.c4{ order: 8; }
  .nm-tier[data-t="2"]{ order: 9; } .nm-r-ops.c5{ order: 10; }

  /* card surfaces, painted on the cells themselves */
  .nm-h-des, .nm-r-des{ background: #fff; border-left: 1px solid var(--nm-line); border-right: 1px solid var(--nm-line); }
  .nm-h-des{ border-top: 1px solid var(--nm-line); border-radius: 14px 14px 0 0; padding-bottom: 8px; }
  .nm-r-des.r6{ border-bottom: 1px solid var(--nm-line); border-radius: 0 0 14px 14px; margin-bottom: 18px; }
  .nm-h-ops, .nm-r-span, .nm-tier, .nm-r-ops{ background: var(--nm-ink); }
  .nm-h-ops{ border-radius: 14px 14px 0 0; padding-bottom: 12px;
    background-image: radial-gradient(120% 90% at 100% 0%, rgba(121,24,45,.55), transparent 60%); }
  .nm-r-ops.c5.r6{ border-radius: 0 0 14px 14px; }

  .nm-r-des, .nm-r-ops, .nm-r-span{ padding: 14px 22px; text-align: left; align-items: flex-start; }
  .nm-r-span{ background-image: none; }
  .nm-r-ops::after{ left: 22px; right: 22px; }
  .nm-r-des{ border-top: 0; }
  .nm-r-des + .nm-r-des{ box-shadow: inset 0 1px 0 var(--nm-line); }

  /* each value carries its row name */
  [data-label]::before{
    content: attr(data-label); display: block; margin-bottom: 4px;
    font-family: var(--nm-hfont); font-weight: var(--nm-hw);
    font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #8a8a94;
  }
  .nm-r-ops[data-label]::before{ color: rgba(255,255,255,.45); }

  /* tiers: stack icon beside the title */
  .nm-tier{ display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; align-items: center;
    padding: 18px 22px 6px; box-shadow: inset 0 1px 0 var(--nm-ink-line); }
  .nm-tier h4{ grid-column: 1 / -1; margin-bottom: 6px; }
  .nm-tier .nm-ministack{ grid-row: 2 / 4; }
  .nm-tier strong{ margin-top: 0; }
  .nm-tier .nm-sig{ margin-top: 4px; }
  .nm-r-ops.c3, .nm-r-ops.c4, .nm-r-ops.c5{ padding-top: 8px; }
  .nm-r-ops.c3::after, .nm-r-ops.c4::after, .nm-r-ops.c5::after{ display: none; }
  .nm-r-ops.r3, .nm-r-ops.r4, .nm-r-ops.r5, .nm-r-ops.r6{ padding-top: 6px; padding-bottom: 8px; }
}


/* lead-in inside capability cells ("On top of Base:") */
.nm-lead{ display: block; margin-bottom: 3px; font-family: var(--nm-hfont); font-weight: var(--nm-hw);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--nm-pink); }

/* ===================== separator before the licence statement ===================== */
.nm-sep{ display: flex; align-items: center; gap: 20px; margin: 110px 0 60px;
  /*font-family: var(--nm-hfont); */font-weight: var(--nm-hw); font-size: 15px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--nm-wine); }
.nm-sep::before, .nm-sep::after{ content: ""; flex: 1; height: 1px; background: var(--nm-line); }
.nm-sep span{ display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.nm-sep span::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--nm-wine);
  box-shadow: 0 0 0 5px rgba(121,24,45,.12); }
@media (max-width: 575px){ .nm-sep{ font-size: 10px; letter-spacing: .16em; gap: 12px; margin: 80px 0 40px; } .nm-sep span{ white-space: normal; text-align: center; } }

/* ===================== 4b · one licence for your whole organisation ===================== */
.nm-licence{
  margin-top: 0;
  display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center;
}
.nm-licence-text h3{
  margin: 6px 0 22px; font-family: var(--nm-hfont); font-weight: var(--nm-hw);
  font-size: clamp(36px, 4.4vw, 60px); line-height: 1.0; text-transform: uppercase; color: var(--nm-head);
}
.nm-licence-text h3 em{ font-style: normal; color: var(--nm-wine); }
.nm-licence-text p{ margin: 0 0 34px; max-width: 480px; font-size: 17px; line-height: 1.65; color: var(--nm-text); }

.nm-quote{ display: inline-flex; align-items: center; text-decoration: none;
  font-family: var(--nm-hfont); font-weight: var(--nm-hw); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.nm-quote-label{ background: var(--nm-wine); color: #fff; padding: 19px 34px; border-radius: 50px;
  box-shadow: 0 14px 30px -12px rgba(121,24,45,.6); }
.nm-quote-arrow{ width: 56px; height: 56px; border-radius: 50%; margin-left: -10px; flex: none;
  background: var(--nm-wine); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px -12px rgba(121,24,45,.6); transition: transform .35s var(--nm-ease); }
.nm-quote-arrow svg{ width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.nm-quote:hover .nm-quote-arrow{ transform: translateX(5px) rotate(45deg); }   /* movement only, no colour change */
.nm-quote:focus-visible{ outline: none; }
.nm-quote:focus-visible .nm-quote-label{ outline: 2px solid var(--nm-wine); outline-offset: 3px; }

/* chart (unchanged from the previous version, larger and unboxed) */
.nm-licence-fig{
  margin: 0; width: 100%; max-width: 540px; justify-self: end; box-sizing: border-box;
  padding: 26px 30px 30px; border-radius: 14px; background: var(--nm-ink);
  background-image: radial-gradient(110% 80% at 100% 0%, rgba(121,24,45,.5), transparent 60%);
  box-shadow: 0 24px 50px -24px rgba(17,18,22,.55);
}
.nm-licence-fig figcaption{ margin: 0 0 14px; font-family: var(--nm-hfont); font-weight: var(--nm-hw);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.nm-chart{ width: 100%; height: auto; display: block; overflow: visible; }
.nm-chart .ax{ fill: none; stroke: rgba(255,255,255,.4); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.nm-chart .axl{ font-family: var(--nm-hfont); font-weight: var(--nm-hw); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; fill: rgba(255,255,255,.5); }
.nm-chart .ln{ fill: none; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s var(--nm-ease); }
.nm-chart .ln-flat{ stroke: rgba(255,255,255,.45); stroke-width: 2.2; stroke-dasharray: 1 1; }
.nm-chart .ln-nemo{ stroke: var(--nm-pink); stroke-width: 3.4; transition-delay: .35s; }
.nm-chart .lab{ font-family: var(--nm-hfont); font-weight: var(--nm-hw); font-size: 12.5px; opacity: 0;
  transition: opacity .5s ease 1.2s; }
.nm-chart .lab-flat{ fill: rgba(255,255,255,.6); }
.nm-chart .lab-nemo{ fill: var(--nm-pink); transition-delay: 1.5s; }
.nm-licence.is-in .nm-chart .ln{ stroke-dashoffset: 0; }
.nm-licence.is-in .nm-chart .lab{ opacity: 1; }

@media (max-width: 991px){
  .nm-licence{ grid-template-columns: 1fr; gap: 40px; }
}

/* ===================== entrance ===================== */
.nm-cmp .nm-ms{ opacity: 0; transform: translateY(-8px); transition: opacity .4s ease, transform .5s var(--nm-ease); }
.nm-cmp.is-in .nm-ms{ opacity: 1; transform: none; }
.nm-cmp.is-in .nm-ms[data-i="1"]{ transition-delay: .12s; }
.nm-cmp.is-in .nm-ms[data-i="2"]{ transition-delay: .24s; }
.nm-cmp.is-in .nm-ms[data-i="3"]{ transition-delay: .36s; }

@media (prefers-reduced-motion: reduce){
  .nm-lic *{ transition: none !important; }
  .nm-cmp .nm-ms{ opacity: 1; transform: none; }
  .nm-chart .ln{ stroke-dashoffset: 0; } .nm-chart .lab{ opacity: 1; }
}