/*!
 * Helio Stitch
 * Copyright (c) 2026 Helio Stitch. All rights reserved.
 *
 * This software is proprietary and confidential. It is licensed for use through
 * the Helio Stitch service only, and is not sold. You may not copy, modify,
 * redistribute, sell, resell, sublicense, reverse engineer or create derivative
 * works from it, in whole or in part, without prior written permission.
 *
 * Designs and machine files you make with Helio Stitch are yours.
 * Third-party components keep their own licences:
 * https://heliostitch.com/attribution
 *
 * For extended usage, licensing or partnership: sam@cityembroidery.com
 */
/* /pricing — sits on lander.css (header, buttons, plan cards, FAQ, footer) and
   adds only what the tier cards' highlights, the interval switch and the
   comparison table need. Same ground and accent as the lander:
   DESIGN.md § Signed-out surfaces. */

.pr-hero { display: flex; flex-direction: column; align-items: center; gap: 32px; padding-top: 72px; padding-bottom: 48px; }
.pr-title { font-size: clamp(36px, 5vw, 60px); line-height: 1.02; text-align: center; }
.pr-hero .section-lede { max-width: 640px; }
.pr-grid { width: 100%; }

/* ---------- monthly / yearly ---------- */
.pr-interval { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid #25272C; border-radius: 999px; background: #101113; }
.pr-interval-btn {
  height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent;
  color: #A9ADB5; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.pr-interval-btn[aria-pressed="true"] { background: #B6D84A; color: #15170E; }
.pr-save { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; opacity: .8; }

body[data-interval="monthly"] .pr-annual { display: none; }
body[data-interval="annual"] .pr-monthly { display: none; }

/* ---------- cards ---------- */
.pr-card { gap: 18px; }
.pr-audience { font-size: 14px; color: #B6D84A; margin-top: -8px; }
.pr-pitch { margin: -6px 0 0; line-height: 1.5; }
.pr-asked { display: flex; flex-direction: column; gap: 12px; flex: 1; padding-top: 18px; border-top: 1px dashed #33363C; }
.pr-asked-title { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: #8A8E96; }
.pr-asked-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pr-asked-list li { display: flex; gap: 10px; font-size: 15px; line-height: 1.4; }
.pr-asked-list svg { flex: none; margin-top: 2px; }
.pr-asked-list strong { display: block; font-weight: 600; color: #ECEAE4; }
.pr-asked-detail { display: block; font-size: 13.5px; color: #8A8E96; margin-top: 2px; }
.pr-btn-static { background: transparent; color: #8A8E96; border: 1px dashed #33363C; cursor: default; }
.pr-btn-note { font-size: 13px; line-height: 1.45; color: #8A8E96; margin-top: -8px; text-align: center; }
.pr-buy { display: flex; }
.pr-buy .plan-btn { flex: 1; }
.pr-manage { font-size: 14px; text-align: center; margin-top: -8px; }
.pr-notice {
  margin: 0; max-width: 640px; padding: 14px 18px; border-radius: 14px;
  /* Neutral, not lime: the accent marks what to press, never a status. */
  border: 1px solid #33363C; background: #131417;
  color: #ECEAE4; font-size: 15px; line-height: 1.5; text-align: center;
}
.pr-fine { margin: -8px 0 0; font-size: 13px; color: #8A8E96; }

/* ---------- comparison ---------- */
.pr-compare { display: flex; flex-direction: column; gap: 28px; padding-top: 48px; }
.pr-focus { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pr-focus-label { font-size: 14px; color: #8A8E96; margin-right: 4px; }
.pr-chip {
  height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid #33363C;
  background: transparent; color: #C9CBD0; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.pr-chip:hover { border-color: #B6D84A; }
.pr-chip[aria-pressed="true"] { background: #B6D84A; border-color: #B6D84A; color: #15170E; }

/* clip, not hidden: `overflow: hidden` makes the table a scroll container,
   and the sticky plan-name row would then stick to it instead of the page. */
.pr-table { border: 1px solid #25272C; border-radius: 20px; overflow: clip; }
.pr-row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid #1E2024;
  transition: opacity .15s ease;
}
.pr-row:last-child { border-bottom: 0; }
.pr-head { position: sticky; top: 68px; z-index: 5; background: #131417; border-bottom: 1px solid #25272C; }
.pr-col-name { padding: 16px 12px; text-align: center; font-weight: 700; font-size: 16px; }
.pr-section-title {
  padding: 22px 22px 10px; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px;
  color: #B6D84A; border-bottom: 1px solid #1E2024; background: #0F1012;
}
.pr-k { padding: 16px 22px; display: flex; flex-direction: column; gap: 4px; }
.pr-label { font-size: 15px; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pr-detail { font-size: 13.5px; line-height: 1.45; color: #8A8E96; }
.pr-cell { display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; }
.pr-val { font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; color: #ECEAE4; }
.pr-none { color: #4A4D54; }

/* The audience that asks for a row: a tag on the label and a lit cell in that
   audience's column — the same fact twice, so it reads from either side. */
.pr-tag {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(182, 216, 74, .45); color: #C6E36A;
}
.pr-cell-asked { background: rgba(182, 216, 74, .07); box-shadow: inset 0 0 0 1px rgba(182, 216, 74, .18); }

/* Filtering to one audience keeps every row — the table still has to answer
   "is it in my plan" — and quietens the ones that audience does not ask for. */
.pr-table[data-focus="free"] .pr-row:not(.pr-head):not([data-asked="free"]),
.pr-table[data-focus="individual"] .pr-row:not(.pr-head):not([data-asked="individual"]),
.pr-table[data-focus="studio"] .pr-row:not(.pr-head):not([data-asked="studio"]) { opacity: .32; }

/* ---------- switching ---------- */
.pr-switch { padding-top: 32px; padding-bottom: 32px; }
.pr-switch-card {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px;
  padding: 40px; border: 1px solid #25272C; border-radius: 24px; background: #101113;
}
.pr-switch-card .section-title { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; }
.pr-switch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; align-self: center; }
.pr-switch-list li { font-size: 16px; line-height: 1.55; color: #A9ADB5; padding-left: 18px; border-left: 2px dashed #33363C; }
.pr-switch-list strong { color: #ECEAE4; }

.faq-section .faq-q { cursor: default; }

@media (max-width: 720px) {
  .pr-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pr-row .pr-k { grid-column: 1 / -1; padding-bottom: 4px; }
  .pr-head .pr-k { display: none; }
  .pr-cell { padding: 8px 8px 14px; }
  .pr-switch-card { padding: 24px; }
}
@media (max-width: 480px) {
  .pr-hero, .pr-compare, .pr-switch { padding-left: 16px; padding-right: 16px; }
  .pr-k, .pr-section-title { padding-left: 14px; padding-right: 14px; }
}

/* lander.css gives .page `overflow-x: hidden`, which turns it into a scroll
   container that never scrolls — and a sticky element sticks to its nearest
   scroll container, so neither the site header nor the plan-name row would
   stick. `clip` hides the same overflow without becoming one. */
.page { overflow-x: clip; }