/* ==========================================================================
   Plans page: Sellva and Sellva Light.

   Markup is written by components/plans/build.mjs. The hierarchy is the point
   of the page: Sellva comes first and big (dark silk, 64px title, the only
   pink button in the body), Sellva Light below and smaller (light silk, 30px
   title, green outline button). Never two equal cards side by side.
   ========================================================================== */

.pl {
  --pl-mint: #8FCBA3;
  --pl-mint-line: rgba(143, 203, 163, 0.5);
  --pl-deep: #0E2A22;
  display: block;
  font-family: Inter, system-ui, sans-serif;
  color: var(--sns-ink-800);
}
.pl a { color: var(--sns-blue-700); }
.pl a:hover { color: #264F30; }
.pl-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.pl-wrap { padding: 0 24px; }

/* ---------------------------------------------------------------- hero -- */

.pl-hero { padding: 88px 24px 56px; text-align: center; }
.pl-eyebrow {
  margin: 0 0 16px;
  font: 700 12px/1.2 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sns-grey-600);
}
.pl-h1 {
  margin: 0 auto; max-width: 780px;
  font: 800 clamp(34px, 5vw, 54px)/1.1 Poppins, Inter, sans-serif; letter-spacing: -0.03em;
  color: var(--sns-ink-800);
}
.pl-intro { margin: 20px auto 0; max-width: 620px; font-size: 18px; line-height: 1.6; color: var(--sns-grey-600); }
.pl .pl-pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 28px; padding: 9px 16px; border-radius: 999px;
  background: var(--sns-blue-100); color: #264F30;
  font-size: 14px; font-weight: 500; text-decoration: none;
  transition: background 0.18s ease;
}
.pl .pl-pill:hover { background: var(--sns-blue-200); color: #264F30; }

/* ------------------------------------------------------- Sellva panel -- */

/* The solid colour holds the white text at full contrast while the silk
   loads; the WebP is preferred where the browser takes it. */
.pl-panel {
  max-width: 1200px; margin: 0 auto; box-sizing: border-box;
  display: flex; flex-wrap: wrap; gap: 48px;
  padding: 56px; border-radius: 24px;
  color: #FFFFFF;
  background: #061510 url('/assets/silk/silk-dark-1920x1080.jpg') center bottom / cover no-repeat;
  background-image: image-set(url('/assets/silk/silk-dark-1920x1080.webp') type('image/webp'), url('/assets/silk/silk-dark-1920x1080.jpg') type('image/jpeg'));
  box-shadow: var(--sns-shadow-lg);
}
.pl-main { flex: 1 1 560px; min-width: 0; }
/* The orb sits to the left of the title, as on the Sellva Light card. */
.pl-brandrow { display: flex; align-items: center; gap: 16px; }
.pl-brandrow img { display: block; flex: none; }
.pl-title {
  margin: 0;
  font: 800 64px/1 Poppins, Inter, sans-serif; letter-spacing: -0.035em; color: #FFFFFF;
}
.pl-tagline { margin: 14px 0 0; font: 600 20px/1.35 Poppins, Inter, sans-serif; color: var(--pl-mint); }
.pl-text { margin: 18px 0 0; max-width: 580px; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, 0.8); }

.pl-features {
  /* Two flowing columns rather than a grid: in a grid a label that wraps
     (French "Conditions commerciales & négociations") made its whole row
     taller and left a gap under the item beside it (Guilherme, 21 Oct). */
  list-style: none; margin: 32px 0 0; padding: 0;
  columns: 2; column-gap: 24px;
}
.pl-features li { break-inside: avoid; margin-bottom: 14px; }
.pl-features li:last-child { margin-bottom: 0; }
.pl-features li, .pl-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.35; }
.pl-chk { flex: none; width: 18px; height: 18px; margin-top: 0.5px; }
.pl-chk path { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pl-features .pl-chk { color: var(--pl-mint); }

.pl-extras { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: grid; gap: 14px; }
.pl-tagrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 14px; color: rgba(255, 255, 255, 0.75); }
.pl-tag {
  font: 700 11px/1 Inter, sans-serif; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pl-mint); border: 1px solid var(--pl-mint-line); border-radius: 6px; padding: 4px 8px;
}
.pl-dots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; }
/* The dot ends the item before it, so a wrapped line never starts with one. */
.pl-dots li:not(:last-child)::after { content: '·'; padding: 0 12px; color: rgba(255, 255, 255, 0.5); }

.pl-value { margin: 28px 0 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); }
.pl-value strong { font: 700 18px/1 Poppins, Inter, sans-serif; color: #FFFFFF; }
.pl .pl-value a { color: var(--pl-mint); font-weight: 600; white-space: nowrap; }
.pl .pl-value a:hover { color: #B7E0C4; }

/* "How it starts" */
.pl-start {
  flex: 1 1 340px; min-width: 0; box-sizing: border-box; align-self: flex-start;
  padding: 30px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
}
.pl-label {
  margin: 0;
  font: 700 12px/1.2 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pl-mint);
}
.pl-steps { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.pl-steps li { display: flex; gap: 14px; }
.pl-num {
  flex: 0 0 28px; height: 28px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(143, 203, 163, 0.6); color: var(--pl-mint); font-size: 13px; font-weight: 600;
}
.pl-steps li > span:last-child { display: flex; flex-direction: column; gap: 3px; }
/* Child combinators: the step text can hold a bolded "Sellva" of its own. */
.pl-steps li > span > strong { font-size: 15px; color: #FFFFFF; }
.pl-steps li > span > strong + span { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); }
.pl-pricing { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.pl-pricing p { margin: 0; }
.pl-pricing-label { font-size: 13px; color: rgba(255, 255, 255, 0.72); }
.pl-pricing-title { margin-top: 4px !important; font: 700 22px/1.25 Poppins, Inter, sans-serif; letter-spacing: -0.01em; color: #FFFFFF; }
.pl-pricing-text { margin-top: 4px !important; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); }

.pl .pl-btn {
  display: block; box-sizing: border-box; text-align: center; text-decoration: none;
  border-radius: 11px; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.pl .pl-btn--cta {
  margin-top: 24px; padding: 14px 18px;
  font: 600 15px/1.2 Poppins, Inter, sans-serif; color: #FFFFFF; background: var(--sns-cta);
}
.pl .pl-btn--cta:hover { background: var(--sns-cta-hover); color: #FFFFFF; }
.pl .pl-calc {
  display: block; margin-top: 12px; padding: 8px; text-align: center;
  font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.85);
}
.pl .pl-calc:hover { color: #FFFFFF; }
.pl .pl-btn:focus-visible, .pl .pl-pill:focus-visible, .pl-panel a:focus-visible {
  outline: 3px solid rgba(143, 203, 163, 0.85); outline-offset: 3px;
}

/* ------------------------------------------------------- Sellva Light -- */

.pl-light-wrap { padding: 72px 24px 96px; max-width: 1200px; margin: 0 auto; box-sizing: content-box; scroll-margin-top: 90px; }
.pl-divider { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.pl-divider::before, .pl-divider::after { content: ''; flex: 1 1 auto; height: 1px; background: rgba(15, 23, 42, 0.1); }
.pl-divider span {
  font: 700 12px/1.2 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sns-grey-600);
}
.pl-light {
  background: #FFFFFF; border: 1px solid var(--sns-border); border-radius: 20px;
  box-shadow: var(--sns-shadow-md); overflow: hidden;
}
.pl-light-body {
  display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start;
  padding: 40px; color: var(--pl-deep);
  background: #CFDED8 url('/assets/silk/silk-light-1920x1080.jpg') center / cover no-repeat;
  background-image: image-set(url('/assets/silk/silk-light-1920x1080.webp') type('image/webp'), url('/assets/silk/silk-light-1920x1080.jpg') type('image/jpeg'));
}
.pl-light-intro { flex: 1 1 320px; min-width: 0; }
.pl-light-head { display: flex; align-items: center; gap: 10px; }
.pl-light-head img { display: block; }
.pl-light-title { margin: 0; font: 800 30px/1.1 Poppins, Inter, sans-serif; letter-spacing: -0.03em; color: var(--pl-deep); }
/* Countdown to the Sellva Light launch (assets/plans-countdown.js). */
.pl-cd { margin: 18px 0 4px; }
.pl-cd-label {
  margin: 0 0 8px;
  font: 700 12px/1.2 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pl-deep);
}
.pl-cd-tiles { display: flex; gap: 8px; }
.pl-cd-tiles[hidden] { display: none; }
.pl-cd-tile {
  min-width: 62px; padding: 8px 10px 7px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(14, 42, 34, 0.1); border-radius: 10px;
}
.pl-cd-num { font: 800 24px/1 Poppins, Inter, sans-serif; letter-spacing: -0.02em; color: var(--pl-deep); font-variant-numeric: tabular-nums; }
.pl-cd-unit { font-size: 11px; line-height: 1.2; color: var(--pl-deep); }
.pl-cd-date { margin: 8px 0 0; font-size: 13px; color: var(--pl-deep); }
/* Without scripts the date carries the message, so it is set like the label. */
.pl-cd:not(.is-live) .pl-cd-label { display: none; }
.pl-cd:not(.is-live) .pl-cd-date { margin: 0; font-weight: 600; font-size: 14px; }

.pl-light-lead { margin: 14px 0 8px; font-size: 17px; font-weight: 600; color: var(--pl-deep); }
.pl-light-text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--pl-deep); }
.pl-light-includes { flex: 1 1 260px; min-width: 0; }
.pl-label--ink { color: var(--pl-deep); margin-bottom: 14px; }
.pl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pl-list li { color: var(--pl-deep); }
.pl-list .pl-chk { color: var(--pl-deep); }

.pl-price {
  flex: 0 1 290px; min-width: 240px; box-sizing: border-box;
  padding: 24px; border-radius: 16px; background: #FFFFFF;
  box-shadow: 0 12px 32px rgba(14, 42, 34, 0.12), 0 2px 6px rgba(14, 42, 34, 0.06);
}
.pl-price p { margin: 0; }
.pl-price-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pl-price-figure { font: 800 40px/1.1 Poppins, Inter, sans-serif; letter-spacing: -0.03em; color: var(--sns-ink-800); }
.pl-price-per { font-size: 14px; color: var(--sns-grey-600); }
.pl-price-note { margin-top: 4px !important; font-size: 13px; color: var(--sns-grey-600); }
.pl-price-note--gap { margin-top: 10px !important; }
.pl .pl-btn--outline {
  margin-top: 20px; padding: 12px 16px;
  font: 600 14px/1.2 Inter, sans-serif; color: #264F30; background: #FFFFFF;
  border: 1.5px solid var(--sns-brand);
}
.pl .pl-btn--outline:hover { background: var(--sns-blue-100); color: #264F30; }
.pl .pl-btn--outline:focus-visible { outline: 3px solid rgba(63, 125, 78, 0.45); outline-offset: 3px; }
.pl-price-small { margin-top: 10px !important; text-align: center; font-size: 12px; color: var(--sns-grey-500); }

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 900px) {
  .pl-panel { gap: 36px; }
  .pl-main, .pl-start { flex-basis: 100%; }
}
@media (max-width: 760px) {
  .pl-cd-tile { min-width: 0; flex: 1 1 0; padding: 8px 4px 7px; }
  .pl-hero { padding: 56px 20px 40px; }
  .pl-wrap { padding: 0 16px; }
  .pl-panel { padding: 32px 22px; border-radius: 20px; }
  .pl-features { columns: 1; }
  .pl-start { padding: 24px 20px; }
  .pl-light-wrap { padding: 56px 16px 72px; }
  .pl-light-body { padding: 28px 22px; gap: 28px; }
  .pl-price { flex-basis: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pl .pl-btn, .pl .pl-pill { transition: none; }
}