/* ===== แพ็กเกจองค์กร (org.html) =====
   Only the parts of this page that do not exist on the sales page. Everything
   else — .section, .card, .btn, .faq-item, .footer — comes from styles.css, so
   the two pages stay one design and a change to the tokens reaches both. */

.org-hero { overflow: hidden; padding-bottom: 60px; }

.org-hero-meefai {
  display: block;
  position: absolute;
  right: 28px;
  bottom: -34px;
  width: 150px;
  height: auto;
  filter: drop-shadow(5px 6px 0 rgba(255,255,255,.16));
  transform: scaleX(-1) rotate(-2deg);
}

/* An editorial rule-and-label, not a pill.
   The white rounded pill this replaced is the eyebrow badge on every generated
   landing page in existence, and a shop owner who has seen twenty of them reads
   it as "another one of those" before they reach the headline. A short rule
   either side of letterspaced small caps is a printed-report device instead,
   which is the register this page is actually in — and it rhymes with the
   certificate, where the same gold rules and letterspacing do the same job.

   Marigold rather than white: it is the only gold on a blue field, so it marks
   the label as a heading rather than as a button somebody forgot to style. */
.org-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 22px;
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--marigold);
}

.org-kicker::before,
.org-kicker::after {
  content: '';
  width: 36px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* Letter-spacing puts a gap after the LAST character too, which would push the
   right-hand rule further out than the left one and leave the label sitting off
   centre. Pulling it back by the same amount is the fix. */
.org-kicker span {
  letter-spacing: 0.2em;
  margin-right: -0.2em;
}

@media (max-width: 520px) {
  .org-kicker { gap: 10px; }
  .org-kicker::before, .org-kicker::after { width: 22px; }
  .org-hero { padding-bottom: 34px; }
  .org-hero-meefai { position: static; width: 104px; margin: 24px auto -12px; }
}

/* ===== the three packages =====
   Equal-height columns so the three buttons line up across the row. Without the
   flex column and the auto margin above the button, a card whose description
   runs one line longer pushes its own button down and the row reads as though
   the packages are ranked by how far down their button sits. */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .pkg-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
}

.pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px 26px 26px;
  box-shadow: var(--shadow);
  border: 2px solid transparent;
}

/* The middle card is the one most shops land on, so it is marked rather than
   left to be found. Lifted rather than recoloured: the palette already spends
   marigold on the price and on the bonus cards, and a third meaning for the same
   colour would stop any of them meaning anything. */
.pkg-featured {
  border-color: var(--marigold);
  box-shadow: 0 14px 40px rgba(59, 105, 154, 0.18);
}

@media (min-width: 901px) {
  .pkg-featured { transform: translateY(-12px); }
}

.pkg-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--marigold);
  color: var(--steel-blue-dark);
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 5px 16px;
  border-radius: 999px;
}

.pkg-name {
  font-size: 1.3rem;
  margin: 0 0 6px;
}

.pkg-seats {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* The seat count is the only number on the card, so it carries the weight a
   price would carry on the sales page. */
.pkg-num {
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--steel-blue);
  margin-right: 6px;
}

.pkg-for {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 0.93rem;
}

.pkg-list {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
}

.pkg-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 0.93rem;
  line-height: 1.6;
}

.pkg-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 700;
}

/* margin-top:auto is what pins every button to the bottom of its own card. */
.pkg-btn {
  margin-top: auto;
  width: 100%;
  text-align: center;
}

.pkg-note {
  margin: 36px auto 0;
  max-width: 620px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ===== what every package gets ===== */
.inc-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 36px;
}

.inc {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--white);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}

.inc-ico {
  font-size: 1.6rem;
  line-height: 1.2;
  flex-shrink: 0;
}

/* Thai has no spaces inside a word, so a long clause is one unbreakable run and
   a flex item at its default min-width:auto will overflow rather than wrap. */
.inc > div { flex: 1 1 0; min-width: 0; }
.inc h3 { font-size: 1.05rem; margin: 0 0 6px; }
.inc p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; }

/* ===== the dashboard drawing =====
   A drawing of the real screen rather than a screenshot, so selling this never
   publishes a real employee's name or email. */
.dash-mock {
  margin: 32px 0 18px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(59, 105, 154, 0.18);
  background: var(--white);
}

.dash-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--steel-blue-dark);
  padding: 12px 16px;
}

.dash-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
}

.dash-title {
  margin-left: 10px;
  color: rgba(255,255,255,0.9);
  font-family: 'Kanit', sans-serif;
  font-size: 0.85rem;
}

.dash-body { padding: 22px 20px 20px; }
.dash-shop { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.dash-shop strong { color: var(--ink); }
.dash-seats {
  margin: 2px 0 16px;
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
  color: var(--steel-blue-dark);
}

.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.dash-table th {
  text-align: left;
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--ink-soft);
  padding: 0 8px 8px 0;
  border-bottom: 1px solid var(--warm-cream-alt);
}

.dash-table td {
  padding: 11px 8px 11px 0;
  border-bottom: 1px solid var(--warm-cream);
  white-space: nowrap;
}

/* One dot per Module, the same shorthand the real dashboard uses. */
.dm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 4px;
  border-radius: 50%;
  border: 1px solid var(--warm-cream-alt);
  background: var(--warm-cream);
  color: var(--ink-soft);
  font-family: 'Kanit', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
}

.dm.is-done { background: var(--success); border-color: var(--success); color: var(--white); }
.dm.is-part { background: var(--marigold); border-color: var(--marigold-dark); color: var(--steel-blue-dark); }

.dash-legend {
  margin: 14px 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.dash-legend .dm { margin: 0 4px 0 12px; }
.dash-legend .dm:first-child { margin-left: 0; }

/* The table cannot wrap without the module dots stacking, so on a narrow screen
   it scrolls sideways inside its own frame rather than widening the page. */
@media (max-width: 620px) {
  .dash-body { overflow-x: auto; }
  .dash-table { min-width: 460px; }
}

/* ===== how it starts ===== */
.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 36px 0 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 62px;
  padding-bottom: 30px;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--steel-blue);
  color: var(--white);
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The line joining the numbers. Not on the last step, or it would trail off into
   nothing under the final item. */
.steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 19px;
  top: 46px;
  bottom: 8px;
  width: 2px;
  background: var(--warm-cream-alt);
}

.steps h3 { font-size: 1.05rem; margin: 8px 0 6px; }
.steps p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

.footer-link { color: rgba(255,255,255,0.85); }

/* Two notes that must NOT reuse .section-note. That class carries margin-top:-16px
   because it is built to tuck under a section title; anywhere else the negative
   pull drags it up into whatever is above it. Under the CTA it climbed inside the
   button and printed the reply time on top of the pill. */
.cta-note {
  margin: 14px 0 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.dash-note {
  margin: 20px auto 0;
  max-width: 620px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
}