/* Styles that belong only to the other pages (how it works, faq, about, privacy, couples, get the app, guides, legal). Loaded after styles.css.
   Everything is scoped under .pg (the body class set by _build/pg.py), so no other page is touched.
   One size per role: --pg-h2 (section title), --pg-h3 (card title), --pg-lead, --pg-body (all running text), --pg-small (captions, notes). */

.pg {
  --pg-body: max(1.1rem, var(--fs-base));
  --pg-small: max(1rem, var(--fs-sm));
  --pg-lead: max(1.28rem, var(--fs-xl));
  --pg-h3: max(1.45rem, var(--fs-xl));
  --pg-h2: clamp(2rem, 1.45rem + 1.9vw, 2.75rem);
  --pg-gap: clamp(1rem, 2vw, 1.5rem);
}

/* ---- rhythm: tighter than the base sections ---- */
.pg .pg-sec { padding-block: clamp(2.25rem, 4.2vw, 3.5rem); }
.pg .pg-hero { padding-block: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 3.2vw, 2.5rem); }
.pg .pg-sec + .pg-sec { padding-top: clamp(1.75rem, 3.4vw, 3rem); }
.pg .section--soft + .pg-sec, .pg .pg-sec + .section--soft { padding-top: clamp(2.25rem, 4.2vw, 3.5rem); }

/* ---- type roles ---- */
.pg .pg-h1 { max-width: 22ch; }
.pg .pg-hero--c .pg-h1, .pg .pg-hero--c .pg-sub { margin-inline: auto; }
.pg .pg-sub { font-size: var(--pg-lead); line-height: 1.5; max-width: 40rem; color: var(--ink-2); }
.pg .pg-h2 { font-size: var(--pg-h2); line-height: 1.12; }
.pg .pg-h3 { font-size: var(--pg-h3); line-height: 1.2; }
.pg .pg-lead { font-size: var(--pg-lead); line-height: 1.5; color: var(--ink-2); }
.pg .pg-note { font-size: var(--pg-small); color: var(--muted); line-height: 1.5; }
.pg .pg-center { text-align: center; margin-inline: auto; }
.pg .pg-lead.pg-center { max-width: 44rem; margin-top: var(--s-5); }
.pg .pg-note.pg-center { max-width: 44rem; margin-top: var(--s-5); }

/* ---- hero ---- */
.pg .pg-hero--c { text-align: center; }
.pg .pg-hero--c .crumbs ol, .pg .pg-hero--c .eyebrow { justify-content: center; }
.pg .pg-hero .cluster { margin-top: var(--s-5); }
.pg .pg-hero .crumbs { margin-bottom: var(--s-4); }

/* ---- section heads (centered on desktop) ---- */
.pg .pg-head { max-width: 46rem; margin: 0 auto var(--s-6); text-align: center; }
.pg .pg-head > * + * { margin-top: 0.6rem; }
.pg .pg-head .eyebrow { display: flex; justify-content: center; }
.pg .pg-head--left { margin-left: 0; text-align: left; }
.pg .pg-head--left .eyebrow { justify-content: flex-start; }

/* ---- grids ---- */
.pg .pg-grid { display: grid; gap: var(--pg-gap); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 40rem) {
  .pg .pg-grid--2, .pg .pg-grid--3, .pg .pg-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .pg .pg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 70rem) {
  .pg .pg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* five items: centered rows when they wrap, one row of five on wide screens */
.pg .pg-grid--5 { display: flex; flex-wrap: wrap; justify-content: center; }
.pg .pg-grid--5 > * { flex: 0 1 100%; }
@media (min-width: 40rem) { .pg .pg-grid--5 > * { flex-basis: calc((100% - var(--pg-gap)) / 2); } }
@media (min-width: 56rem) { .pg .pg-grid--5 > * { flex-basis: calc((100% - 2 * var(--pg-gap)) / 3); } }
@media (min-width: 76rem) { .pg .pg-grid--5 > * { flex-basis: calc((100% - 4 * var(--pg-gap)) / 5); } }

/* ---- cards: text a size up from the base ---- */
.pg .pg-card { padding: clamp(1.1rem, 2vw, 1.5rem); }
.pg .pg-card > * + * { margin-top: 0.6rem; }
.pg .pg-card > p, .pg .pg-card .checklist li { font-size: var(--pg-body); line-height: 1.5; }
.pg .pg-card > p:not(.tag) { color: var(--ink-2); }
.pg .pg-card h3 { font-size: var(--pg-h3); display: flex; align-items: center; gap: 0.5rem; }
.pg .pg-card .tag { font-size: var(--pg-small); }
.pg .pg-card .icon-bubble { margin-bottom: 0.25rem; }

/* ---- steps with a thread: a vertical list on phones, a row from 52rem. Every circle sits at the same place. ---- */
.pg .pg-steps { display: grid; gap: var(--s-5); counter-reset: pgstep; }
.pg .pg-step { position: relative; padding-left: 4.4rem; counter-increment: pgstep; min-height: 3.4rem; }
.pg .pg-step::before {
  content: counter(pgstep); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 3.2rem; height: 3.2rem;
  border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-card);
  font-family: var(--font-display); font-size: 1.5rem; color: var(--accent-ink);
}
.pg .pg-step:not(:last-child)::after {
  content: ""; position: absolute; left: 1.6rem; top: 3.5rem; bottom: calc(-1 * var(--s-5) - 0.3rem); width: 2px;
  background: repeating-linear-gradient(to bottom, var(--accent) 0 5px, transparent 5px 10px); opacity: 0.6;
}
.pg .pg-step h3 { margin-bottom: 0.25rem; }
.pg .pg-step p { font-size: var(--pg-body); line-height: 1.5; color: var(--ink-2); }
/* a row of steps (--row): circle centered over each step, thread runs from circle to circle, so the last step matches the others */
@media (min-width: 52rem) {
  .pg .pg-steps--row { --g: var(--s-6); grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--g); }
  .pg .pg-steps--row .pg-step { padding: 4.4rem 0 0; text-align: center; }
  .pg .pg-steps--row .pg-step::before { left: 50%; transform: translateX(-50%); }
  .pg .pg-steps--row .pg-step::after { display: none; }
  .pg .pg-steps--row .pg-step + .pg-step::after {
    display: block; left: calc(-50% - var(--g) + 1.9rem); right: auto; width: calc(100% + var(--g) - 3.8rem);
    top: 1.6rem; bottom: auto; height: 2px;
    background: repeating-linear-gradient(to right, var(--accent) 0 5px, transparent 5px 10px);
  }
}

/* ---- a split: words beside a picture, centered as a block ---- */
.pg .pg-split { display: grid; gap: var(--s-6); align-items: center; max-width: 66rem; margin-inline: auto; }
@media (min-width: 52rem) { .pg .pg-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); } }
.pg .pg-split__vis { display: grid; justify-items: center; }
.pg .pg-split .scene { width: 100%; max-width: 32rem; }

/* ---- captioned example screens (a phone, a title, a sentence) ---- */
.pg .pg-fig {
  display: grid; align-content: stretch; justify-items: center; gap: var(--s-4); text-align: center;
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1rem, 2vw, 1.4rem) clamp(1.2rem, 2vw, 1.6rem); border-radius: var(--r-xl); background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-card);
}
.pg .pg-fig .phone { margin-inline: auto; }
.pg .pg-fig { grid-template-rows: auto 1fr auto; }
.pg .pg-fig:not(:has(.pg-tag)) { grid-template-rows: 1fr auto; }
.pg .pg-fig__ph { display: grid; justify-items: center; align-items: center; width: 100%; container-type: inline-size; } /* the phone sizes itself from this box (cqw); the card itself must not be a container, or its rows cannot line up (subgrid) */
.pg .pg-fig figcaption { max-width: 26rem; }
.pg .pg-fig figcaption p { margin-top: 0.4rem; font-size: var(--pg-body); line-height: 1.5; color: var(--ink-2); }
.pg .pg-tag {
  justify-self: center; padding: 0.2rem 0.85rem; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-ink);
  font-size: var(--pg-small); font-weight: 600; letter-spacing: 0.02em;
}

/* ---- the playful closing band ---- */
.pg .pg-band { padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem); }
.pg .pg-band .lead { font-size: var(--pg-lead); }

/* hidden means hidden, whatever display a component sets */
.pg [hidden] { display: none !important; }

/* ---- FAQ ---- */
.pg .faq-search { position: relative; max-width: 36rem; margin: var(--s-5) auto 0; }
.pg .faq-search__ic { position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%); color: var(--muted); display: grid; pointer-events: none; }
.pg .faq-search__in { min-height: 3.5rem; padding: 0.8rem 5.2rem 0.8rem 3.1rem; border-radius: var(--r-full); font-size: var(--pg-body); background: var(--surface); }
.pg .faq-search__clear { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); min-height: 2.6rem; padding: 0 1rem; border: 0; border-radius: var(--r-full); background: var(--surface-2); color: var(--ink); font-size: var(--pg-small); font-weight: 550; }
.pg .faq-search__in::-webkit-search-cancel-button { display: none; }
.pg .faq-count { min-height: 1.6em; margin-top: var(--s-3); text-align: center; }
.pg .faq-layout { display: grid; gap: var(--s-5); max-width: 66rem; margin-inline: auto; }
.pg .faq-jump ul { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.15rem 0 0.5rem; scrollbar-width: none; }
.pg .faq-jump ul::-webkit-scrollbar { display: none; }
.pg .faq-jump__t { display: none; }
.pg .faq-jump a {
  flex: none; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: var(--r-full); background: var(--surface-2);
  color: var(--ink); text-decoration: none; font-size: var(--pg-small); font-weight: 550; box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap;
}
.pg .faq-jump a:hover { background: var(--accent-soft); }
@media (min-width: 64rem) {
  .pg .faq-layout { grid-template-columns: 17.5rem minmax(0, 1fr); gap: var(--s-7); align-items: start; }
  .pg .faq-jump { position: sticky; top: calc(var(--header-h) + 1rem); max-height: calc(100vh - var(--header-h) - 2rem); overflow-y: auto; }
  .pg .faq-jump ul { display: grid; gap: 0.1rem; overflow: visible; padding: 0; }
  .pg .faq-jump__t { display: block; margin-bottom: 0.4rem; font-size: var(--pg-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-left: 0.8rem; }
  .pg .faq-jump a { min-height: 2.25rem; padding: 0.2rem 0.8rem; line-height: 1.3; border-radius: var(--r-md); background: transparent; box-shadow: none; white-space: normal; }
}
.pg .faq-group { scroll-margin-top: calc(var(--header-h) + 1rem); }
.pg .faq-group + .faq-group { margin-top: var(--s-6); }
.pg .faq-group > h2 { margin-bottom: var(--s-3); }
.pg .faq { gap: 0.6rem; }
.pg .faq summary { min-height: 3.4rem; padding: 0.8rem 1.2rem; font-size: max(1.15rem, var(--fs-lg)); }
.pg .faq__a { padding: 0 1.2rem 1.1rem; }
.pg .faq__a p { font-size: var(--pg-body); line-height: 1.55; }
.pg .faq-empty { text-align: center; padding: var(--s-6) 0; }

/* ---- a wrap for wide tables and long blocks ---- */
.pg .pg-wrap { max-width: none; margin-inline: auto; }

/* ---- three across, centered when the last row is short ---- */
.pg .pg-grid--flex3 { display: flex; flex-wrap: wrap; justify-content: center; }
.pg .pg-grid--flex3 > * { flex: 0 1 100%; }
@media (min-width: 40rem) { .pg .pg-grid--flex3 > * { flex-basis: calc((100% - var(--pg-gap)) / 2); } }
@media (min-width: 62rem) { .pg .pg-grid--flex3 > * { flex-basis: calc((100% - 2 * var(--pg-gap)) / 3); } }
.pg .pg-card__label { font-family: var(--font-display); font-size: var(--pg-h3) !important; color: var(--ink) !important; }
@media (min-width: 40rem) { .pg .pg-limits > :first-child { grid-column: 1 / -1; } }
.pg .pg-limits .pg-card { max-width: none; }

/* ---- the who-sees table, a size up ---- */
.pg .table { font-size: var(--pg-body); line-height: 1.45; }
.pg .table thead th { font-size: var(--pg-small); }
.pg .table th, .pg .table td { padding: 0.75rem var(--s-4); }
.pg .table caption { font-size: var(--pg-small); }
.pg .table .tag { font-size: var(--pg-small); }
.pg .faq-group__title { font-size: clamp(1.6rem, 1.25rem + 1vw, 2rem); }

/* ---- phone widths on these pages follow the global --phone-w-* scale ---- */
.pg .phone--pg { --phone-w: var(--phone-w-base); }
.pg .phone--pg-lg { --phone-w: var(--phone-w-xl); }
.pg .pg-fig .phone { --phone-w: min(var(--phone-w-base), 100cqw); }

/* ---- hero with a phone ---- */
.pg .pg-hero__grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 56rem) { .pg .pg-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s-7); } }
.pg .pg-hero__txt > * + * { margin-top: var(--s-4); }
.pg .pg-hero__vis { display: grid; justify-items: center; }
.pg .pg-hero__vis .demo { margin: 0; }

/* ---- for couples ---- */
.pg .pg-quote { font-family: var(--font-display); font-size: clamp(1.45rem, 1.15rem + 1vw, 1.8rem) !important; line-height: 1.25; color: var(--ink) !important; letter-spacing: -0.01em; }
.pg .pg-hubcard { display: flex; flex-direction: column; }
.pg .pg-hubcard__ph { display: grid; justify-items: center; margin-top: var(--s-4); container-type: inline-size; }
.pg .pg-hubcard .card__link { margin-top: auto; padding-top: var(--s-3); font-size: var(--pg-body); }
.pg .pg-hubcard .phone { --phone-w: min(19rem, 100cqw); }
.pg .pg-hubcard .phone--fit .phone__screen { min-height: calc(var(--phone-w) * 1.56); }
.pg .pg-split--wide { max-width: 72rem; }
.pg .pg-more { font-size: var(--pg-body); }
.pg .pg-more a { font-weight: 550; }
.pg .mirror { margin-inline: auto; max-width: 40rem; gap: var(--s-5); }
.pg .mirror p { font-size: clamp(1.45rem, 1.15rem + 1vw, 1.85rem); line-height: 1.25; }
.pg .pg-checks li { font-size: var(--pg-body); line-height: 1.5; }
.pg .pg-honest { max-width: 52rem; margin-inline: auto; }
.pg .pg-duo { display: grid; gap: var(--s-5); justify-items: center; }
@media (min-width: 40rem) { .pg .pg-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg .pg-duo .phone { --phone-w: min(17rem, 40vw); } }
.pg .pg-split__vis .phone { margin-inline: auto; }

.pg .pg-hubcard > h3 { font-family: var(--font-sans); font-size: var(--pg-small); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); }
.pg .pg-more--c { text-align: center; margin-top: var(--s-5); }
.pg .pg-card__label { font-weight: 400 !important; }

/* ---- About ---- */
.pg .pg-quote-card { padding: clamp(1.4rem, 3.5vw, 2.5rem); text-align: center; }
.pg .pg-quote-card .icon { margin-inline: auto; }
.pg .pg-quote-card p { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); line-height: 1.35; }
.pg .pg-quote-card footer { font-size: var(--pg-body); }
.pg .pg-principles { counter-reset: none; }
.pg .pg-num { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font-display); font-size: 1.4rem; }

/* ---- get the app / install ---- */
.pg .pg-open { max-width: 40rem; margin-inline: auto; }
.pg .pg-open .card { margin-top: var(--s-4); }
.pg .pg-tabs > .tabs__list, .pg .pg-tabs__list { margin: 0 auto var(--s-5); }
.pg .pg-tabs .tabs__tab { font-size: var(--pg-body); min-height: 3rem; padding-inline: 1.4rem; }
.pg .pg-tabs .tabs__panel > .pg-h2, .pg .pg-tabs .tabs__panel > .pg-h3 { margin: var(--s-5) auto var(--s-5); max-width: 40rem; }
.pg .pg-tabs .pg-note { margin-top: 0; }
.pg .pg-insts { counter-reset: none; }
.pg .pg-inst { display: grid; align-content: start; gap: var(--s-4); padding: clamp(1rem, 2vw, 1.3rem); border-radius: var(--r-xl); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-card); }
.pg .pg-inst__txt { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; }
.pg .pg-inst__n { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--btn); color: var(--on-btn); font-family: var(--font-display); font-size: 1.4rem; }
.pg .pg-inst__txt h3 { font-size: max(1.3rem, var(--fs-xl)); line-height: 1.2; }
.pg .pg-inst__txt p { margin-top: 0.3rem; font-size: var(--pg-body); line-height: 1.45; color: var(--ink-2); }
.pg .pg-inst img { width: 100%; max-width: 26rem; height: auto; margin: auto auto 0; filter: drop-shadow(0 18px 28px rgba(60, 40, 90, 0.2)); }
.pg .pg-faq { max-width: 52rem; margin-inline: auto; }

/* ---- design audit fixes ---- */
/* a row of steps: the thread also reaches the last step (the base rule only drew it for steps that have a next one) */
.pg .pg-steps--row .pg-step + .pg-step::after { content: ""; position: absolute; }
.pg .nw { white-space: nowrap; }
/* phones in one row of captioned screens grow to the tallest one, so they are all the same size */
.pg .pg-figs .pg-fig__ph { align-items: stretch; }
.pg .pg-figs .pg-fig__ph .phone--fit { display: flex; flex-direction: column; }
.pg .pg-figs .pg-fig__ph .phone--fit .phone__body { flex: 1 1 auto; }
/* captioned screens: tag, phone and caption rows line up across a row of cards (a caption of 3 lines no longer moves the phone) */
.pg .pg-figs > .pg-fig:has(.pg-tag) { grid-row: span 3; grid-template-rows: subgrid; }
.pg .pg-figs > .pg-fig:not(:has(.pg-tag)) { grid-row: span 2; grid-template-rows: subgrid; }
/* day cards: titles take two lines on a row of four, so the words start at the same height */
[data-section="how.day"] .pg-card h3 { display: block; }
@media (min-width: 70rem) { [data-section="how.day"] .pg-card h3 { min-height: 2.4em; } }
/* install cards: the words row and the picture row line up across a row of cards */
@media (min-width: 40rem) {
  .pg .pg-insts.pg-grid--flex3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pg .pg-insts > .pg-inst { grid-column: span 2; grid-row: span 2; grid-template-rows: subgrid; gap: var(--s-4); }
  .pg .pg-insts > .pg-inst:nth-child(5) { grid-column: 2 / span 2; }
}
@media (min-width: 62rem) {
  .pg .pg-insts.pg-grid--flex3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pg .pg-insts > .pg-inst:nth-child(4) { grid-column: 2 / span 2; }
  .pg .pg-insts > .pg-inst:nth-child(5) { grid-column: 4 / span 2; }
}
/* get the app: the sign-up card centres its button and note */
.pg .pg-open .signup { max-width: none; justify-items: center; text-align: center; }
.pg .pg-open .signup .btn--block { width: 100%; max-width: 26rem; }
/* get the app: couples' quotes in an even grid (8 cards: 2 across, then 4 across) so no column ends short */
[data-section="get.voices"] .voices { columns: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
[data-section="get.voices"] .voice { display: block; margin: 0; padding: var(--s-4); }
[data-section="get.voices"] .voice__top { margin-bottom: var(--s-3); }
[data-section="get.voices"] .voice blockquote p, [data-section="get.voices"] .voice--lead blockquote p { font-size: var(--fs-lg); line-height: 1.35; }
[data-section="get.voices"] .voice figcaption { margin-top: var(--s-3); }
@media (min-width: 40rem) { [data-section="get.voices"] .voices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } }
@media (min-width: 76rem) { [data-section="get.voices"] .voices { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* hero with a tall phone: the words start near the top instead of floating in the middle of empty space */
@media (min-width: 56rem) { .pg .pg-hero__grid { align-items: start; } .pg .pg-hero__txt { padding-top: clamp(1rem, 7vh, 4.5rem); } }
/* the link under a checklist (Join) had a spacing class that does not exist: give it room */
.pg .pg-checks + .pg-more { margin-top: var(--s-5); }
/* the closing band: a little more room beside the words on phones */
@media (max-width: 39.99rem) { .pg .pg-band { padding-inline: 1.5rem; } }
/* the contents list on phones: every link is at least 44px tall */
@media (max-width: 63.99rem) { .pg .legal-toc a { align-items: center; min-height: 2.75rem; padding-block: 0.15rem; } }
/* the short legal pages: the text sits right under the title */
.pg .section--flush-top.pg-sec { padding-top: 0; }


/* ---- guides, glossary ---- */
.pg .pg-card__link { font-size: var(--pg-body); }
.pg .pg-next strong { font-size: max(1.45rem, var(--fs-xl)); }
.pg .pg-next span { font-size: var(--pg-small); }
.pg .pg-sec--article { padding-top: 0; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.pg .article { font-size: max(1.2rem, var(--fs-lg)); line-height: 1.65; }
.pg .article h2 { font-size: max(1.75rem, var(--fs-2xl)); margin-top: 1.6em; }
.pg .article__note, .pg .callout p + p { font-size: var(--pg-body); }
.pg .terms { gap: var(--s-4); margin-top: var(--s-4); }
.pg .term { padding: var(--s-5); }
.pg .term h3 { font-size: var(--pg-h3); }
.pg .term p { font-size: var(--pg-body); line-height: 1.5; }
.pg .term .chip { font-size: var(--pg-small); }
.pg .glossary__find { max-width: 40rem; margin-inline: auto; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* the sticky search sits on a solid full-width strip, so the cards never show beside it */
.pg .glossary__find::before { content: ""; position: absolute; z-index: -1; top: -0.6rem; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.pg .glossary__find .input { min-height: 3.4rem; font-size: var(--pg-body); }
.pg .pg-hero .eyebrow + .h1 { margin-top: var(--s-3); }
.pg .pg-figs .phone--fit .phone__screen { min-height: calc(var(--phone-w) * 1.62); }

/* the FAQ jump list scrolls inside its own box instead of widening the page */
.pg .faq-layout > * { min-width: 0; }
.pg .faq-jump { max-width: 100%; }

/* ---- Everything inside: every visual in the same tile, every phone the same size ---- */
.pg .phone--ev { --phone-w: var(--ev-w, 15rem); }
.pg .pg-ev { display: grid; gap: var(--pg-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 40rem) { .pg .pg-ev { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 58rem) { .pg .pg-ev { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 78rem) { .pg .pg-ev { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pg .pg-ev .fcard { container-type: inline-size; padding: 0.9rem 0.9rem 1.2rem; gap: 0.9rem; align-content: start; }
.pg .pg-ev .fcard > .demo {
  --ev-w: min(17rem, calc(100vw - 7.2rem));
  height: calc(var(--ev-w) * 2.5 + 9rem); align-content: center; grid-template-rows: auto auto; padding: 0.7rem; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line);
}
.pg .pg-ev .fcard .demo .phone { --phone-w: var(--ev-w); }
.pg .pg-ev .fcard .demo .phone--fit .phone__screen { min-height: calc(var(--ev-w) * 2.44); }
.pg .pg-ev .fcard .demo .mini { width: 100%; }
.pg .pg-ev .fcard h3 { font-size: max(1.3rem, var(--fs-xl)); line-height: 1.2; }
.pg .pg-ev .fcard p { font-size: var(--pg-body); line-height: 1.45; margin-top: 0.35rem; }
.pg .pg-flist { display: grid; gap: var(--s-3) var(--pg-gap); grid-template-columns: minmax(0, 1fr); margin-top: var(--pg-gap); }
@media (min-width: 52rem) { .pg .pg-flist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 78rem) { .pg .pg-flist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg .pg-flist .frow { padding: 0.9rem 1rem; align-items: flex-start; }
.pg .pg-flist .frow h3 { font-size: max(1.2rem, var(--fs-lg)); }
.pg .pg-flist .frow p { font-size: var(--pg-body); line-height: 1.45; margin-top: 0.2rem; }
.pg .fchapter + .fchapter { margin-top: 0; }
.pg .pg-pills-wrap { padding-top: var(--s-4); }
.pg .pg-pills { justify-content: center; flex-wrap: wrap; overflow: visible; }
.pg .pg-pills a { font-size: var(--pg-body); }

@media (min-width: 40rem) { .pg .pg-ev .fcard > .demo { --ev-w: min(16rem, calc((100vw - 4.5rem) / 2 - 3.8rem)); } }
@media (min-width: 58rem) { .pg .pg-ev .fcard > .demo { --ev-w: min(16rem, calc((100vw - 6rem) / 3 - 3.8rem)); } }
@media (min-width: 78rem) { .pg .pg-ev .fcard > .demo { --ev-w: 14.5rem; } }

.pg .pg-ev--minis, .pg .pg-ev + .pg-ev { margin-top: var(--pg-gap); }
.pg .pg-ev--minis { align-items: stretch; }
@media (min-width: 78rem) { .pg .pg-ev--minis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg .pg-ev--minis .fcard { grid-template-rows: 1fr auto; }
.pg .pg-ev--minis .fcard > .demo { height: auto; min-height: 15rem; }

.pg .pg-ev .fcard .demo__bar { flex-direction: column; gap: 0.15rem; min-height: 5.4rem; justify-content: flex-start; }
.pg .pg-ev .fcard .demo__hint { font-size: var(--pg-small); text-align: center; }

/* ---- Privacy policy and Terms of use: long-form reading ---- */
.pg .legal-wrap { max-width: 74rem; }
.pg .legal-hero { padding-bottom: var(--s-4); }
.pg .legal-hero .pg-h1 { max-width: none; }
.pg .legal-eff { margin-top: var(--s-3); font-size: var(--pg-lead); color: var(--ink-2); }
.pg .legal-layout { display: grid; gap: var(--s-5); }
.pg .legal-toc { padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.pg .legal-toc__t { font-size: var(--pg-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }
.pg .legal-toc ol { display: grid; gap: 0.1rem; }
.pg .legal-toc a { display: flex; gap: 0.6rem; padding: 0.35rem 0; font-size: var(--pg-body); line-height: 1.35; color: var(--ink); text-decoration: none; }
.pg .legal-toc a span { flex: none; min-width: 1.8em; color: var(--accent-ink); font-weight: 600; }
.pg .legal-toc a:hover { color: var(--accent-ink); text-decoration: underline; }
@media (min-width: 40rem) and (max-width: 63.99rem) { .pg .legal-toc ol { grid-template-columns: 1fr 1fr; column-gap: var(--s-5); } }
@media (min-width: 64rem) {
  .pg .legal-layout { grid-template-columns: 17rem minmax(0, 1fr); gap: var(--s-7); align-items: start; }
  .pg .legal-toc { position: sticky; top: calc(var(--header-h) + 1rem); max-height: calc(100vh - var(--header-h) - 2rem); overflow-y: auto; }
  .pg .legal-toc a { font-size: var(--pg-small); padding: 0.28rem 0; }
}
.pg .legal-doc { max-width: 46rem; font-size: max(1.15rem, var(--fs-lg)); line-height: 1.65; }
.pg .legal-doc p, .pg .legal-doc li { max-width: 70ch; }
.pg .legal-doc > * + *, .pg .legal-intro > * + * { margin-top: 0.9em; }
.pg .legal-intro { padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); margin-bottom: var(--s-3); }
.pg .legal-h2 { display: flex; gap: 0; align-items: baseline; margin-top: 2.2em; padding-top: 0.2em; font-size: clamp(1.7rem, 1.35rem + 1.1vw, 2.15rem); line-height: 1.2; scroll-margin-top: calc(var(--header-h) + 1rem); }
.pg .legal-h2__n { flex: none; min-width: 3.6rem; color: var(--accent-ink); }
.pg .legal-h3 { display: flex; gap: 0.6rem; align-items: baseline; margin-top: 1.6em; font-size: max(1.35rem, var(--fs-xl)); line-height: 1.25; scroll-margin-top: calc(var(--header-h) + 1rem); }
.pg .legal-h3__n { flex: none; color: var(--accent-ink); }
.pg .legal-clause { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 0.4rem; }
.pg .legal-n { color: var(--accent-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pg .legal-list { padding-left: 1.4rem; list-style: disc; margin-left: 3.6rem; }
.pg .legal-list li + li { margin-top: 0.4em; }
.pg .legal-list li::marker { color: var(--accent); }
.pg .legal-table { margin-top: 1em; overflow-x: auto; border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line); background: var(--surface); }
.pg .legal-table table { width: 100%; border-collapse: collapse; font-size: var(--pg-body); line-height: 1.45; text-align: left; }
.pg .legal-table th, .pg .legal-table td { padding: 0.65rem 0.9rem; vertical-align: top; }
.pg .legal-table th { background: var(--surface-2); font-size: var(--pg-small); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.pg .legal-table tbody tr + tr td { border-top: 1px solid var(--line); }
@media (max-width: 39.99rem) {
  .pg .legal-clause { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .pg .legal-list { margin-left: 2.6rem; }
  .pg .legal-h2__n { min-width: 3rem; }
  .pg .legal-table table { min-width: 34rem; }
}

/* narrow screens: nothing may widen the page */
.pg .legal-layout > *, .pg .pg-split > *, .pg .pg-hero__grid > * { min-width: 0; }
@media (max-width: 39.99rem) {
  .pg .pg-tabs .tabs__tab { padding-inline: 0.85rem; font-size: 1rem; }
  .pg .pg-tabs__list { width: 100%; justify-content: space-between; }
  .pg .pg-tabs__list .tabs__tab { flex: 1 1 auto; }
}
html:not(.js) .faq-search, html:not(.js) .faq-count { display: none; }

/* ---- Everything inside: a directory of tiles (8 groups, same-size thumbnails) ---- */
.pg { --th-h: 6.3rem; --th-k: 0.44; }
@media (min-width: 40rem) { .pg { --th-h: 9.2rem; --th-k: 0.6; } }
.pg main .ftiles-sec.ftiles-sec.ftiles-sec { padding-block: clamp(1.1rem, 2.4vw, 2.2rem); }
.pg .ftiles-head { margin: 0 0 var(--s-3); scroll-margin-top: calc(var(--header-h) + 1rem); }
.pg .ftiles-head .pg-h2 { font-size: var(--fs-2xl); }
.pg .ftiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; list-style: none; padding: 0; margin: 0; }
@media (min-width: 40rem) { .pg .ftiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); } }
@media (min-width: 64rem) { .pg .ftiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pg .ftile {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  scroll-margin-top: calc(var(--header-h) + 1rem); transition: box-shadow var(--t-fast);
}
.pg .ftile:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.pg .ftile:has(.ftile__go:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.pg .ftile__a { position: absolute; top: 0; left: 0; width: 0; height: 0; scroll-margin-top: calc(var(--header-h) + 1rem); }
.pg .ftile__thumb { position: relative; flex: none; height: var(--th-h); overflow: hidden; background: var(--surface-2); pointer-events: none; }
.pg .ftile__thumb::after { content: ""; position: absolute; inset: auto 0 0 0; height: 35%; background: linear-gradient(to bottom, transparent, var(--surface-2)); }
.pg .ftile__thumb .phone {
  --phone-w: 15rem; --ph-min: 0px;
  position: absolute; top: 0.5rem; left: 50%; width: var(--phone-w); max-width: none; margin: 0; aspect-ratio: 9 / 19;
  transform: translateX(-50%) scale(var(--th-k)); transform-origin: top center;
}
.pg .ftile__plus { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.pg .ftile__body { flex: 1; display: flex; flex-direction: column; padding: 0.6rem 0.7rem 0; }
.pg .ftile__t { font-size: var(--fs-lg); line-height: 1.2; overflow-wrap: anywhere; }
.pg .ftile__p { margin-top: 0.2rem; font-size: var(--fs-base); line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; }
.pg .ftile__go {
  display: flex; align-items: center; min-height: 2.4rem; margin-top: auto; padding-top: 0.1rem;
  font-size: var(--fs-xs); font-weight: 600; color: var(--accent-ink); text-decoration: none; white-space: nowrap;
}
.pg .ftile__go::after { content: ""; position: absolute; inset: 0; }
.pg .ftile:hover .ftile__go { text-decoration: underline; }
@media (max-width: 39.99rem) {
  .pg .pg-pills { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
}