/* Home/Platform — page-specific sections (hero+preview, energy, comparison, pricing). */

/* Hero */
.pub-hero { padding-block: 4rem 3rem; }
.pub-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 3rem; align-items: center; }
.pub-hero__left { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.pub-hero__left .pub-display { max-width: 14ch; }
.pub-hero__sub { margin: 0; max-width: 34rem; color: var(--semantic-text-text-secondary); font-size: 1.1rem; line-height: 1.6; }
.pub-hero__cta { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Journey preview card (hero, right). */
.pub-preview { background: var(--semantic-background-bg-surface); border: 1px solid var(--semantic-border-border-subtle); border-radius: 1.25rem; box-shadow: var(--pub-shadow, 0 20px 50px -24px rgba(20,20,40,.25)); padding: 1.25rem 1.4rem; }
.pub-preview__head { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.95rem; }
.pub-preview__head .pub-icon { color: var(--base-primary-primary-500); width: 1.1rem; height: 1.1rem; }
.pub-preview__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0; }
.pub-chip { font-size: 0.78rem; padding: 0.25rem 0.6rem; border-radius: var(--pub-radius-pill); border: 1px solid var(--semantic-border-border-default); color: var(--semantic-text-text-secondary); }
.pub-chip--active { background: var(--base-primary-primary-500); border-color: var(--base-primary-primary-500); color: #fff; }
.pub-preview__divider { height: 1px; background: var(--semantic-border-border-subtle); margin: 0.25rem 0 0.9rem; }
.pub-preview__row { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0; font-size: 0.9rem; }
.pub-preview__row .pub-icon { width: 1.05rem; height: 1.05rem; color: var(--semantic-text-text-success); }
.pub-preview__row--todo .pub-icon { color: var(--semantic-border-border-strong); }
.pub-preview__row--active { font-weight: 600; }
.pub-preview__row--active .pub-icon { color: var(--base-primary-primary-500); }
.pub-badge { margin-left: auto; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.15rem 0.45rem; border-radius: var(--pub-radius-pill); background: var(--base-primary-primary-50); color: var(--base-primary-primary-700); }
.dark .pub-badge { background: color-mix(in srgb, var(--base-primary-primary-500) 18%, var(--base-neutral-neutral-800)); color: var(--base-primary-primary-300); }
.pub-quickcheck { margin-top: 0.9rem; padding: 0.9rem; border: 1px solid var(--semantic-border-border-subtle); border-radius: var(--pub-radius-sm); background: var(--semantic-background-bg-page); }
.pub-quickcheck__label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; color: var(--semantic-text-text-tertiary); }
.pub-quickcheck__q { margin: 0.4rem 0 0.7rem; font-size: 0.88rem; font-weight: 500; }
.pub-quickcheck__opts { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pub-opt { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: 0.3rem 0.6rem; border: 1px solid var(--semantic-border-border-default); border-radius: var(--pub-radius-pill); }
.pub-opt--correct { background: var(--semantic-background-bg-success); border-color: transparent; color: var(--semantic-text-text-success); }
.pub-opt--correct .pub-icon { width: 0.9rem; height: 0.9rem; }

/* Energy band */
.pub-energy { background: var(--base-primary-primary-50); }
.dark .pub-energy { background: color-mix(in srgb, var(--base-primary-primary-500) 10%, var(--base-neutral-neutral-900)); }
.pub-energy__inner { display: flex; gap: 1.5rem; align-items: center; padding-block: 2.5rem; }
.pub-energy__icon { flex: none; width: 3.5rem; height: 3.5rem; border-radius: var(--pub-radius); display: grid; place-items: center; color: #fff; background: var(--pub-gradient); }
.pub-energy__icon .pub-icon { width: 1.6rem; height: 1.6rem; }
.pub-energy__title { margin: 0 0 0.35rem; font-size: 1.1rem; font-weight: 600; }
.pub-energy__text { margin: 0; color: var(--semantic-text-text-secondary); font-size: 0.95rem; line-height: 1.6; }

/* Comparison table */
.pub-compare { max-width: 52rem; margin-inline: auto; border: 1px solid var(--semantic-border-border-subtle); border-radius: var(--pub-radius); overflow: hidden; background: var(--semantic-background-bg-surface); }
.pub-compare table { width: 100%; border-collapse: collapse; }
.pub-compare th, .pub-compare td { padding: 0.85rem 0.5rem; text-align: center; font-size: 0.85rem; border-bottom: 1px solid var(--semantic-border-border-subtle); }
.pub-compare thead th { color: var(--semantic-text-text-secondary); font-weight: 600; }
.pub-compare th[scope="row"], .pub-compare td:first-child { text-align: left; padding-left: 1.1rem; font-weight: 600; }
.pub-compare tbody tr:last-child td { border-bottom: none; }
.pub-compare__ulern { background: color-mix(in srgb, var(--base-primary-primary-500) 7%, transparent); }
.pub-compare__pill { display: inline-block; padding: 0.25rem 0.7rem; border-radius: var(--pub-radius-pill); background: var(--pub-gradient); color: #fff; font-weight: 700; font-size: 0.8rem; }
.pub-compare .pub-icon { width: 1.25rem; height: 1.25rem; }
.pub-mark-yes { color: var(--semantic-text-text-success); }
.pub-mark-no { color: var(--semantic-text-text-tertiary); }
.pub-mark-partial { color: var(--base-warning-warning-500); }

/* Pricing */
.pub-pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 48rem; margin-inline: auto; }
.pub-plan { position: relative; background: var(--semantic-background-bg-surface); border: 1px solid var(--semantic-border-border-subtle); border-radius: 1rem; padding: 2rem; display: flex; flex-direction: column; }
.pub-plan--featured { border-color: var(--base-primary-primary-500); box-shadow: 0 0 0 1px var(--base-primary-primary-500); }
.pub-plan__badge { display: inline-block; align-self: flex-start; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.07em; padding: 0.2rem 0.6rem; border-radius: var(--pub-radius-pill); background: var(--base-primary-primary-500); color: #fff; margin-bottom: 0.6rem; }
.pub-plan__name { margin: 0 0 0.5rem; font-size: 1.5rem; font-weight: 700; }
.pub-plan__price { display: flex; align-items: baseline; gap: 0.4rem; }
.pub-plan__price b { font-size: 2.75rem; font-weight: 700; letter-spacing: -0.02em; }
.pub-plan__price span { color: var(--semantic-text-text-tertiary); font-size: 0.95rem; }
.pub-plan__note { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--semantic-text-text-tertiary); }
.pub-plan__desc { margin: 0.8rem 0 1.2rem; font-size: 0.9rem; color: var(--semantic-text-text-secondary); line-height: 1.5; }
.pub-plan__feats { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.pub-plan__feats li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.92rem; }
.pub-plan__feats .pub-icon { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.12rem; color: var(--semantic-text-text-success); }
.pub-plan__btn { margin-top: auto; }

@media (max-width: 60rem) {
  .pub-hero__grid { grid-template-columns: 1fr; }
  .pub-hero__left .pub-display { max-width: none; }
  .pub-pricing { grid-template-columns: 1fr; }
  .pub-energy__inner { flex-direction: column; text-align: center; align-items: center; }
}
@media (max-width: 40rem) {
  .pub-compare { font-size: 0.78rem; overflow-x: auto; }
  .pub-compare table { min-width: 34rem; }
}