/* Shared shell for the inner pages (faq, pricing, security, legal).
   Prefixed pg-; no landing class is reused here and none of these leak back. */

.pg-head { padding-block: clamp(44px, 6vw, 76px) clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--line); }
.pg-head h1 { margin-block: 16px 16px; font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
.pg-head .lede { font-size: clamp(1rem, 1.6vw, 1.1rem); }

.pg-body { padding-block: clamp(44px, 6vw, 72px); }
.pg-body__in { display: grid; grid-template-columns: 230px 1fr; gap: 56px; align-items: start; }

.pg-toc { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 9px; }
.pg-toc__title { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.pg-toc a { font-size: .92rem; color: var(--muted); border-left: 2px solid var(--line); padding-left: 12px; }
.pg-toc a:hover { color: var(--text); border-left-color: var(--accent); }

.pg-group + .pg-group { margin-top: 52px; }
.pg-group > h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-bottom: 18px; }

.pg-prose { max-width: 72ch; display: grid; gap: 16px; }
.pg-prose h2 { margin-top: 22px; font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
.pg-prose h3 { margin-top: 12px; font-size: 1.06rem; }
.pg-prose ul, .pg-prose ol { padding-left: 20px; display: grid; gap: 8px; color: var(--muted); }
.pg-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.pg-prose code { overflow-wrap: anywhere; }
.pg-prose table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.pg-prose th, .pg-prose td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pg-prose th { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.pg-updated { font-family: var(--mono); font-size: .78rem; color: var(--faint); }

/* faq */
.pg-qa { display: grid; gap: 12px; }
.pg-qa details { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.pg-qa details[open] { border-color: var(--line-2); }
.pg-qa summary { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; list-style: none; font-family: var(--disp); font-weight: 600; font-size: .99rem; }
.pg-qa summary::-webkit-details-marker { display: none; }
.pg-qa summary::after { content: ""; margin-left: auto; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease; }
.pg-qa details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.pg-qa .pg-qa__a { padding: 0 20px 18px; font-size: .94rem; display: grid; gap: 12px; }
.pg-qa .pg-qa__a a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* pricing */
.pg-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* Four rows, named rather than implied: name, price, the list that absorbs
   whatever slack the tallest card creates, and the call to action on the
   floor. Without the template every row is auto and the browser shares the
   extra height between them, so the plan with four bullets printed its price
   20px lower than the plan with five — 32px in Turkish, where the strings are
   longer. A price row that does not line up across a pricing table is the
   first thing a buyer sees and the last thing they can unsee. */
.pg-plan { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
/* The badge sits on the card's edge instead of in the flow, so the featured
   plan's name and price stay on the same line as its neighbours'. */
.pg-plan > .pill { position: absolute; top: -12px; left: 24px; background: var(--bg-raise); }
.pg-plan[data-featured="true"] { border-color: var(--accent-bd); background: var(--bg-raise); box-shadow: var(--shadow-sm); }
.pg-plan__name { font-family: var(--disp); font-weight: 600; font-size: 1.1rem; }
.pg-plan__price { font-family: var(--disp); font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em; }
.pg-plan__price span { display: block; font-family: var(--sans); font-size: .82rem; font-weight: 400; color: var(--faint); letter-spacing: 0; }
.pg-plan__list { list-style: none; display: grid; gap: 9px; font-size: .91rem; color: var(--muted); }
.pg-plan__list li { display: grid; grid-template-columns: 15px 1fr; gap: 9px; align-items: start; }
/* The list starts at the top of its own row rather than centring in it. */
.pg-plan__list { align-content: start; }
.pg-plan__list svg { width: 13px; height: 13px; margin-top: 5px; color: var(--green); }
/* The comparison table is the page's one dense grid, and left to auto layout
   it stops reading as a table: the capability column takes whatever it wants,
   the value columns collapse to the width of "Yes", and a long capability name
   ends up touching its own answer. Fixed proportions keep the two answer
   columns aligned down the page whatever length a row's label runs to. */
.pg-matrix { margin-top: 56px; overflow-x: auto; }
/* This table sits beside .pg-prose rather than inside it, so it inherited none
   of the prose table styling and had been running on browser defaults: centred
   headings and no rules between rows, which is why it did not read as a table
   at all. It owns its own now. */
.pg-matrix table { width: 100%; min-width: 620px; table-layout: fixed; border-collapse: collapse; font-size: .93rem; }
.pg-matrix th, .pg-matrix td { text-align: left; vertical-align: top; padding: 13px 16px 13px 0; border-bottom: 1px solid var(--line); }
.pg-matrix thead th { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.pg-matrix th:first-child, .pg-matrix td:first-child { width: 52%; padding-right: 32px; }
.pg-matrix th:not(:first-child), .pg-matrix td:not(:first-child) { width: 24%; padding-left: 16px; }
/* The head is a different kind of row and should look like one. */
.pg-matrix thead th { border-bottom-color: var(--line-2); padding-bottom: 11px; }
.pg-matrix tbody tr:last-child td { border-bottom: 0; }
.pg-matrix td[data-yes="true"] { color: var(--green); }
.pg-matrix td[data-no="true"] { color: var(--faint); }

@media (max-width: 980px) {
  .pg-body__in { grid-template-columns: 1fr; gap: 32px; }
  /* The sidebar becomes a strip of chips. It wraps rather than scrolling
     sideways: on a 390px screen the label alone ate a third of the width and
     pushed the second entry half off the edge, and a reader who does not
     notice a horizontal scrollbar never finds the rest. Wrapped, every entry
     is visible at once. The label takes its own line above them. */
  .pg-toc { position: static; display: flex; flex-wrap: wrap; gap: 0 18px; padding-bottom: 8px; }
  .pg-toc__title { width: 100%; }
  /* And here the links stop being things you point at and become things you
     thumb, so the target grows to match. */
  .pg-toc a { border-left: 0; border-bottom: 2px solid var(--line); padding: 9px 0 12px; white-space: nowrap; }
  .pg-plans { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .pg-plans { grid-template-columns: 1fr; } }

.pg-plans__note { margin-top: 18px; }
.pg-trial { margin-top: 56px; }
.pg-404-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }