/* Dhraconyx sales page - PAGE-SPECIFIC ONLY.
 *
 * The look comes from skin/ruezals-realm-skin.css and skin/ruezals-skin.css,
 * which are copied verbatim from what ruezals.chat itself loads. This file is
 * loaded last and exists only for the handful of things a marketing page has
 * that the chat's own sheet has no opinion about: a price, a flag chip, a
 * feature row.
 *
 * RULE FOR ANYONE EDITING THIS: if the chat sheet already styles it, do not
 * restate it here. Every declaration copied down into this file is a place the
 * two surfaces can silently drift apart later. Colours below come from the
 * chat sheet's own custom properties for the same reason - change them there
 * and this page follows without anyone remembering to look.
 */

/* -- topbar ----------------------------------------------------------
   .topbar itself is the chat's (sticky, 72px, blurred). Only the two
   things inside it that are ours need saying. */
.brandlink { display: flex; align-items: center; }
.wordmark  { height: 26px; width: auto; display: block; }
.topnav    { display: flex; align-items: center; gap: 8px; }
.topnav .small-button,
.topnav .ghost-button { text-decoration: none; white-space: nowrap; }

/* The page has no sidebar, so .content carries the whole width itself.
   1180px, not the chat's 1600px - this is reading matter, and a 1600px
   measure on prose is a wall of text. */
.content { max-width: 1180px; }

/* -- hero ------------------------------------------------------------
   An <h1> instead of the chat's <h2>, because this is the top of a public
   page and the heading level is not a style choice. The treatment is the
   chat's own .hero-copy h2 rule, applied to the correct element. */
.hero-copy h1 {
  margin: 8px 0 13px;
  font: 700 clamp(2rem, 4vw, 3.5rem)/1.05 Georgia, serif;
  color: var(--gold-bright);
}
.hero-mark img { width: min(240px, 60%); height: auto; opacity: .92; }
.access-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }

/* -- the pre-release notice, with the language picker sitting in it -- */
.notice { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.langpick { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.langpick .pl {
  color: var(--muted); font-size: .62rem;
  letter-spacing: .11em; text-transform: uppercase;
}
.langpick select {
  background: rgba(4, 14, 9, .8);
  border: 1px solid var(--line);
  color: var(--parchment);
  padding: 6px 9px; font-size: .72rem; border-radius: 2px;
}
.langpick {
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: min(420px, 100%);
}
.langpick-search {
  flex: 1 1 140px;
  min-width: 120px;
  background: rgba(4, 14, 9, .8);
  border: 1px solid var(--line);
  color: var(--parchment);
  padding: 6px 9px;
  font-size: .72rem;
  border-radius: 2px;
}
.langpick-search::placeholder { color: var(--muted); opacity: .85; }
.langpick select { flex: 1 1 160px; min-width: 140px; }

.pagelang-note {
  display: block; width: 100%;
  color: var(--gold-bright); font-size: .68rem; letter-spacing: .04em;
}

/* -- prose inside cards ----------------------------------------------
   .card p is set small and dim by the chat sheet, which is right for a
   dashboard tile and wrong for three paragraphs of argument. These two
   classes opt a paragraph back up to reading size. */
.card-pad .body,
.card-pad .lede {
  margin: 0 0 12px;
  color: #9dafa2;
  font-size: .84rem;
  line-height: 1.66;
  max-width: 62ch;
}
.card-pad .lede { font-size: .92rem; color: #b7c6ba; }
.card-pad .strong { margin: 0 0 10px; color: var(--parchment); font-size: 1rem; font-weight: 600; }
.card-pad .micro { margin: 14px 0 0; color: #5d7566; font-size: .68rem; line-height: 1.6; }
.teal { color: var(--teal); }

/* The one line on the page that is a statement of intent rather than an
   explanation, so it is set apart rather than dressed up. */
.pull {
  margin: 16px 0 0; padding-left: 14px;
  border-left: 2px solid var(--gold-line);
  color: var(--gold-bright);
  font: 600 1rem/1.5 "Cormorant Garamond", Georgia, serif;
  font-style: italic;
}

.ticks, .nots, .plan-list { margin: 12px 0 0; padding: 0; list-style: none; }
.ticks li, .nots li {
  position: relative; padding-left: 18px; margin-bottom: 9px;
  color: #9dafa2; font-size: .78rem; line-height: 1.6;
}
.ticks li::before, .nots li::before {
  content: "\25c8"; position: absolute; left: 0; top: 0;
  color: var(--emerald-bright); font-size: .62rem;
}
.nots li::before { content: "\00d7"; color: var(--danger); font-size: .8rem; }
.ticks b, .nots b { color: var(--parchment); }

/* -- feature rows ----------------------------------------------------- */
.feat { display: flex; gap: 12px; margin-bottom: 18px; }
.feat:last-of-type { margin-bottom: 0; }
.feat .ico {
  flex: 0 0 auto; color: var(--gold);
  font-size: .7rem; line-height: 1.9;
}
.feat h3 { margin: 0 0 4px; }
.feat p  { font-size: .76rem; line-height: 1.6; }

/* -- the centred marks ------------------------------------------------ */
.center-pad { display: grid; place-items: center; text-align: center; gap: 10px; }
.center-pad .body { max-width: 42ch; }
.shield { margin: 0; color: var(--gold); font-size: 1.5rem; }
.badge-mark { width: 82px; height: auto; opacity: .9; }
.bt {
  margin: 0; color: var(--gold-bright);
  font: 700 .78rem Cinzel, Georgia, serif;
  letter-spacing: .14em; text-transform: uppercase;
}

/* -- the fifty --------------------------------------------------------
   A GRID, not a wrapping flex line. Fifty chips of differing widths wrap
   into a solid block with no vertical edge to follow, which is what made
   the list read as a wall. Fixed columns give the eye something to scan
   down, and the flags then break the rows up rather than fighting them. */
.language-chips {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 6px;
}
.language-chip {
  display: flex; align-items: center; gap: 8px;
  border-radius: 2px; padding: 7px 10px;
  min-width: 0;
}
/* The name is the thing being scanned, so it takes the light. The code is a
   reference and sits back. */
.language-chip .ln {
  flex: 1 1 auto; min-width: 0;
  color: #9dafa2; font-size: .7rem; letter-spacing: .01em;
  text-transform: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.language-chip b {
  flex: 0 0 auto;
  color: #4f735a; font-weight: 600;
  font-size: .54rem; letter-spacing: .1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.foot-note { max-width: 78ch; }

@media (max-width: 520px) {
  .language-chips { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* -- plans ------------------------------------------------------------ */
.card-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.price {
  margin: 10px 0 0; color: var(--gold-bright);
  font: 700 2rem/1 Georgia, serif;
}
.price span {
  color: var(--muted); font-size: .68rem; font-weight: 400;
  letter-spacing: .08em;
}
.plan-list li {
  padding: 7px 0; border-bottom: 1px solid rgba(55, 104, 67, .14);
  color: #8e9d93; font-size: .74rem;
}
.plan-list li:last-child { border-bottom: 0; }
.plan-list b { color: var(--parchment); }
.card-pad .ghost-button,
.card-pad .small-button { display: block; margin-top: 14px; text-align: center; text-decoration: none; }

/* -- footer ----------------------------------------------------------- */
.portal-footer { flex-wrap: wrap; }
.foot-warn { max-width: 62ch; text-align: right; text-transform: none; letter-spacing: 0; }

/* -- narrow screens ---------------------------------------------------
   The chat sheet's grids are fixed column counts because a portal is a
   desktop surface. A public page is not, so they collapse here. */
@media (max-width: 900px) {
  .hero-panel { grid-template-columns: 1fr; }
  .hero-mark { display: none; }
  .two-grid, .three-grid { grid-template-columns: 1fr; }
  .content { padding: 18px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .langpick { margin-left: 0; }
  .foot-warn { text-align: left; }
}
@media (max-width: 620px) {
  .topbar { height: auto; padding: 10px 16px; flex-wrap: wrap; gap: 10px; }
  .top-spacer { display: none; }
  .topnav { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}