/* ==========================================================================
   Inner pages: features index, feature / solution / about / hardware / security
   pages, solutions index, contact, legal, 404 and the final CTA.
   Loaded after site.css on every site page except home and pricing.
   Everything here is prefixed pg-. Section colours come from local custom
   properties (--s-*), the same contract as site.css's .theme-* classes, so the
   pages look right even while site.css is changing.
   ========================================================================== */

/* ---- Section themes ---------------------------------------------------------- */
.pg-dark, .pg-dark-2 {
  --s-bg: #090B0F; --s-text: #FFFFFF; --s-text-2: #A7ADB7; --s-text-3: #8B929D;
  --s-line: #262C35; --s-line-2: #343A44; --s-card: #15191F; --s-card-line: #262C35; --s-card-hover: #343A44;
  --s-card-shadow: none; --s-card-shadow-hover: 0 18px 40px -24px rgb(0 0 0 / .8);
  --s-accent-text: #FF8A3D; --s-focus: #FF8A3D; --s-tile: rgb(255 106 0 / .12); --s-tile-ink: #FF6A00;
  --s-check: #FF8A3D;
  color-scheme: dark;
}
.pg-dark-2 { --s-bg: #101319; }
.pg-white, .pg-light {
  --s-bg: #FFFFFF; --s-text: #111318; --s-text-2: #5F6672; --s-text-3: #5F6672;
  --s-line: #E5E7EB; --s-line-2: #D1D5DB; --s-card: #FFFFFF; --s-card-line: #E5E7EB; --s-card-hover: #D1D5DB;
  --s-card-shadow: 0 1px 2px rgb(17 19 24 / .04), 0 8px 24px -12px rgb(17 19 24 / .12);
  --s-card-shadow-hover: 0 1px 2px rgb(17 19 24 / .05), 0 18px 36px -16px rgb(17 19 24 / .22);
  --s-accent-text: #C2410C; --s-focus: #C2410C; --s-tile: #FFF1E6; --s-tile-ink: #C2410C;
  --s-check: #C2410C;
  color-scheme: light;
}
.pg-light { --s-bg: #F7F8FA; }
.pg-dark, .pg-dark-2, .pg-white, .pg-light { background-color: var(--s-bg); color: var(--s-text); }

.pg-dark :focus-visible, .pg-dark-2 :focus-visible, .pg-white :focus-visible, .pg-light :focus-visible {
  outline: 3px solid var(--s-focus); outline-offset: 3px;
}
.pg-bare { list-style: none; margin: 0; padding: 0; }

/* ---- Sections -------------------------------------------------------------------- */
.pg-sec { padding-block: clamp(64px, 8vw, 112px); }
.pg-sec-compact, .pg-sec-text { padding-block: clamp(48px, 6vw, 88px); }
.pg-sec[id] { scroll-margin-top: var(--head-h, 76px); }
.pg-sec-head { margin-bottom: clamp(32px, 4vw, 56px); max-width: 760px; }
.pg-sec-head .pg-sub { margin-top: 16px; }
.pg-sec-head-split { max-width: none; display: grid; gap: 16px 64px; align-items: end; }
@media (min-width: 900px) { .pg-sec-head-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pg-sec-head-split .pg-sub { margin-top: 0; } }

/* ---- Type ------------------------------------------------------------------------ */
.pg-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px;
  font-size: .8125rem; font-weight: 600; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase;
  color: var(--s-accent-text);
}
.pg-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #FF6A00; flex: none; }
.pg-h1 {
  margin: 0; color: var(--s-text); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance;
  font-size: clamp(2.25rem, 1.2rem + 3.2vw, 4rem); max-width: 18ch;
}
.pg-hero-grid:not(.is-text) .pg-h1 { font-size: clamp(2.25rem, 1.3rem + 2.4vw, 3.5rem); }
.pg-hero-compact .pg-h1 { font-size: clamp(2.125rem, 1.3rem + 2.4vw, 3.25rem); max-width: 22ch; }
.pg-h2 {
  margin: 0; color: var(--s-text); font-weight: 700; line-height: 1.1; letter-spacing: -.025em; text-wrap: balance;
  font-size: clamp(2rem, 1.5rem + 1.2vw, 2.625rem);
}
.pg-h2-sm { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); margin-bottom: clamp(24px, 3vw, 40px); }
.pg-h3 { margin: 0; color: var(--s-text); font-size: 1.25rem; font-weight: 600; line-height: 1.25; letter-spacing: -.012em; }
.pg-lede {
  margin: 24px 0 0; color: var(--s-text-2); max-width: 60ch;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.5; letter-spacing: -.005em;
}
.pg-sub { margin: 0; color: var(--s-text-2); font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.55; max-width: 62ch; }
.pg-lede a, .pg-prose a, .pg-side a, .pg-fine a, .pg-card-text a, .pg-hl-list a {
  color: var(--s-accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
}
.pg-lede a:hover, .pg-prose a:hover, .pg-side a:hover, .pg-fine a:hover, .pg-card-text a:hover, .pg-hl-list a:hover {
  color: var(--s-text); text-decoration-thickness: 2px;
}

/* Arrow links ("About the designer →") */
.pg-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: clamp(32px, 4vw, 48px) 0 0; }
.pg-arrow, .pg-more {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--s-accent-text); font-weight: 600; font-size: .9375rem; text-decoration: none;
}
.pg-arrow::after, .pg-more::after { content: "→"; transition: transform .16s cubic-bezier(.2,.7,.2,1); }
.pg-arrow:hover { color: var(--s-accent-text); text-decoration: underline; text-underline-offset: .2em; }
.pg-arrow:hover::after, .pg-card-link:hover .pg-more::after { transform: translateX(2px); }

/* ---- Hero ------------------------------------------------------------------------ */
.pg-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(40px, 6vw, 88px) clamp(64px, 8vw, 112px);
  background:
    radial-gradient(55% 70% at 88% 18%, rgb(255 106 0 / .10), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgb(255 138 0 / .05), transparent 70%),
    #090B0F;
  border-bottom: 1px solid #1C2028;
}
.pg-hero-compact { padding-bottom: clamp(48px, 6vw, 80px); }
.pg-hero-grid { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .pg-hero-grid:not(.is-text) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.pg-hero-text { min-width: 0; }
.pg-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
@media (max-width: 479px) { .pg-cta-row .btn { flex: 1 1 100%; } }
.pg-hero-shot { min-width: 0; }
.pg-hero-shot .tv-portrait { max-width: 300px; margin-inline: auto; }

/* Breadcrumbs inside page heroes */
.pg-hero .crumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 clamp(24px, 3vw, 36px);
  font-size: .875rem; line-height: 1.4; color: var(--s-text-2);
}
.pg-hero .crumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: #4B5260; }
.pg-hero .crumbs a { color: var(--s-text-2); text-decoration: none; }
.pg-hero .crumbs a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: .2em; }
.pg-hero .crumbs [aria-current] { color: var(--s-text); }

/* ---- Product frames (screenshots) --------------------------------------------------- */
.pg-frame { position: relative; isolation: isolate; min-width: 0; }
.pg-frame > .app { border-radius: 14px; overflow: hidden; border: 1px solid #262C35; box-shadow: 0 30px 80px -30px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .04); }
.pg-white .pg-frame > .app, .pg-light .pg-frame > .app { border-color: #E5E7EB; box-shadow: 0 1px 2px rgb(17 19 24 / .05), 0 30px 60px -32px rgb(17 19 24 / .38); }
.pg-glow::before {
  content: ""; position: absolute; inset: -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 106 0 / .22), rgb(255 106 0 / 0)); filter: blur(20px);
}
.pg-split-shot .tv-portrait { max-width: 320px; margin-inline: auto; }

/* ---- Highlights strip ------------------------------------------------------------- */
.pg-hl { padding-block: clamp(40px, 5vw, 64px); }
.pg-hl-list { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.pg-hl-list li { padding: 4px 28px; border-left: 1px solid var(--s-line); min-width: 0; }
.pg-hl-list li:first-child { padding-left: 0; border-left: 0; }
.pg-hl-title { margin: 0 0 8px; color: var(--s-text); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.pg-hl-list p { margin: 0; color: var(--s-text-2); font-size: .9375rem; line-height: 1.55; }
@media (max-width: 1099px) {
  .pg-hl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; }
  .pg-hl-list li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 699px) {
  .pg-hl-list { grid-template-columns: 1fr; gap: 0; }
  .pg-hl-list li, .pg-hl-list li:nth-child(odd) { padding: 20px 0; border-left: 0; border-top: 1px solid var(--s-line); }
  .pg-hl-list li:first-child { border-top: 0; padding-top: 0; }
}

/* ---- Text + visual ------------------------------------------------------------------ */
.pg-split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) {
  .pg-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .pg-split.is-flip > .pg-split-text { order: 2; }
  .pg-split-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; }
}
.pg-split-text { min-width: 0; }
.pg-text-only { max-width: 760px; }

/* ---- Prose (Markdown) ----------------------------------------------------------------- */
.pg-prose { color: var(--s-text-2); font-size: 1.0625rem; line-height: 1.65; }
@media (max-width: 699px) { .pg-prose { font-size: 1rem; } }
.pg-prose > * { margin: 0; }
.pg-prose > * + * { margin-top: 16px; }
.pg-prose > .pg-h2 + * { margin-top: 20px; }
.pg-prose h2:not(.pg-h2) { color: var(--s-text); font-size: 1.625rem; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; margin-top: 40px; }
.pg-prose h3 { color: var(--s-text); font-size: 1.1875rem; font-weight: 600; line-height: 1.3; margin-top: 32px; }
.pg-prose h4 { color: var(--s-text); font-size: 1.0625rem; font-weight: 600; margin-top: 24px; }
.pg-prose strong { color: var(--s-text); font-weight: 600; }
.pg-prose ul, .pg-prose ol { padding-left: 1.3rem; display: grid; gap: 8px; }
.pg-prose ul > li::marker { color: var(--s-check); }
.pg-prose ol > li::marker { color: var(--s-text); font-weight: 600; }
.pg-prose code { font-size: .88em; background: color-mix(in srgb, var(--s-line) 45%, transparent); border: 1px solid var(--s-line); padding: .08em .35em; border-radius: 5px; overflow-wrap: anywhere; }
.pg-prose hr { border: 0; border-top: 1px solid var(--s-line); margin: 32px 0; }
.pg-prose blockquote { padding: 4px 0 4px 20px; border-left: 3px solid #FF6A00; }
.pg-prose .table-wrap { overflow-x: auto; border: 1px solid var(--s-line); border-radius: 12px; }
.pg-prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.pg-prose th, .pg-prose td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--s-line); vertical-align: top; }
.pg-prose th { color: var(--s-text); font-weight: 600; background: color-mix(in srgb, var(--s-line) 35%, transparent); }
.pg-prose tr:last-child td { border-bottom: 0; }

/* Check lists */
.pg-checks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.pg-prose .pg-checks { padding-left: 0; }
.pg-checks li { position: relative; padding-left: 28px; color: var(--s-text-2); }
.pg-checks li::before {
  content: ""; position: absolute; left: 3px; top: .45em; width: 12px; height: 6px;
  border-left: 2px solid var(--s-check); border-bottom: 2px solid var(--s-check); transform: rotate(-45deg);
}
.pg-checks-sm { gap: 8px; margin-top: 4px; font-size: .9375rem; line-height: 1.45; }
.pg-checks-sm li::before { top: .38em; }

/* ---- Cards ------------------------------------------------------------------------------ */
.pg-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
  .pg-grid-2, .pg-grid-3, .pg-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .pg-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pg-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
}
.pg-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0;
  background: var(--s-card); border: 1px solid var(--s-card-line); border-radius: 16px;
  padding: 28px; box-shadow: var(--s-card-shadow);
}
.pg-card-tight { padding: 24px; }
@media (max-width: 699px) { .pg-card { padding: 24px; } }
.pg-card-text { margin: 0; color: var(--s-text-2); font-size: .9375rem; line-height: 1.55; }
.pg-card .pg-h3 + .pg-card-text { margin-top: -4px; }
.pg-grid-5 .pg-h3 { font-size: 1.0625rem; }
.pg-tile {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; flex: none;
  background: var(--s-tile); color: var(--s-tile-ink); margin-bottom: 4px;
}
.pg-tile .icon { width: 20px; height: 20px; vertical-align: 0; }

/* Whole-card links: the heading's link stretches over the card. */
.pg-card-link { transition: transform .16s cubic-bezier(.2,.7,.2,1), border-color .16s, box-shadow .16s; }
.pg-card-link:hover { transform: translateY(-2px); border-color: var(--s-card-hover); box-shadow: var(--s-card-shadow-hover); }
.pg-stretch { color: inherit; text-decoration: none; }
.pg-stretch::after { content: ""; position: absolute; inset: 0; border-radius: 16px; z-index: 1; }
.pg-stretch:hover { color: inherit; text-decoration: none; }
.pg-stretch:focus-visible { outline: none; }
.pg-stretch:focus-visible::after { outline: 3px solid var(--s-focus); outline-offset: 3px; }
.pg-card-link .pg-more { margin-top: auto; padding-top: 4px; min-height: 0; }

/* Feature cards on /features */
.pg-fcard .pg-checks { margin-top: 4px; }

/* ---- Hardware comparison ------------------------------------------------------------------ */
.pg-compare { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 640px) { .pg-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pg-compare-card {
  background: var(--s-card); border: 1px solid var(--s-card-line); border-radius: 16px; padding: 24px;
  box-shadow: var(--s-card-shadow);
}
.pg-compare-card.is-rec { border-color: rgb(255 106 0 / .55); box-shadow: 0 0 0 1px rgb(255 106 0 / .2), 0 24px 48px -32px rgb(255 106 0 / .45); position: relative; }
.pg-compare-card.is-rec::before { content: ""; position: absolute; inset: -1px -1px auto; height: 3px; border-radius: 16px 16px 0 0; background: linear-gradient(135deg, #FF9A00 0%, #FF6A00 50%, #F04A00 100%); }
.pg-compare-head { margin: 0 0 16px; color: var(--s-text); font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; }
.pg-compare dl { margin: 0; display: grid; gap: 0; }
.pg-compare dl > div { padding: 12px 0; border-top: 1px solid var(--s-line); }
.pg-compare dl > div:first-child { border-top: 0; padding-top: 0; }
.pg-compare dt { color: var(--s-text-2); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pg-compare dd { margin: 4px 0 0; color: var(--s-text); font-size: 1rem; line-height: 1.45; }
body .pg-prose > .pg-note { margin-top: 20px; }
.pg-note {
  padding: 16px 20px; border-radius: 12px;
  background: var(--s-tile); border-left: 3px solid #FF6A00; color: var(--s-text);
}
.pg-note strong { display: block; font-size: 1.0625rem; }

/* ---- Templates row (solutions) -------------------------------------------------------------- */
.pg-tv-row { display: grid; gap: 32px 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-items: end; }
.pg-tv-item { min-width: 0; }
.pg-tv-item.is-portrait .tv { max-width: 170px; margin-inline: auto; }
.pg-tv-cap { margin: 14px 0 0; color: var(--s-text-2); font-size: .875rem; line-height: 1.45; }
.pg-tv-item.is-portrait .pg-tv-cap { text-align: center; }

/* ---- FAQ ------------------------------------------------------------------------------------- */
.pg-faq-grid { display: grid; gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
@media (min-width: 900px) { .pg-faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.pg-faq-grid .pg-sub { margin-top: 16px; font-size: 1rem; }
.pg-faq { border-top: 1px solid var(--s-line); }
.pg-faq-item { border-bottom: 1px solid var(--s-line); }
.pg-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  list-style: none; cursor: pointer; padding: 20px 0; min-height: 44px;
}
.pg-faq-item summary::-webkit-details-marker { display: none; }
.pg-faq-item summary h3 { margin: 0; color: var(--s-text); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.pg-faq-item summary:hover h3 { color: var(--s-accent-text); }
.pg-faq-sign { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--s-line-2); }
.pg-faq-sign::before, .pg-faq-sign::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; background: var(--s-text); transition: transform .16s; }
.pg-faq-sign::after { transform: rotate(90deg); }
.pg-faq-item[open] .pg-faq-sign::after { transform: rotate(0deg); }
.pg-faq-item[open] .pg-faq-sign { border-color: #FF6A00; }
.pg-faq-a { padding: 0 48px 24px 0; max-width: 70ch; font-size: 1rem; }
@media (max-width: 699px) { .pg-faq-a { padding-right: 0; } }

/* ---- Features index ------------------------------------------------------------------------- */
.pg-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.pg-jump a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1.5px solid #343A44; color: #FFFFFF; font-weight: 600; font-size: .9375rem; text-decoration: none;
  transition: background-color .16s, border-color .16s;
}
.pg-jump a:hover { background: #161A21; border-color: #4B5260; color: #FFFFFF; }
.pg-also { display: grid; gap: 24px 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .pg-also { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pg-also { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-also li { padding-top: 20px; border-top: 1px solid var(--s-line); color: var(--s-text-2); font-size: .9375rem; line-height: 1.55; }
.pg-also strong { display: block; margin-bottom: 4px; color: var(--s-text); font-size: 1.0625rem; font-weight: 600; }

/* ---- Solutions index -------------------------------------------------------------------------- */
.pg-sol-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .pg-sol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pg-sol {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--s-card); border: 1px solid var(--s-card-line); border-radius: 16px; box-shadow: var(--s-card-shadow);
}
.pg-sol-stage {
  display: flex; align-items: center; justify-content: center; height: clamp(220px, 26vw, 300px); padding: 28px; overflow: hidden;
  background: radial-gradient(70% 80% at 50% 110%, rgb(255 106 0 / .22), transparent 70%), linear-gradient(180deg, #161A21, #090B0F);
  border-bottom: 1px solid var(--s-card-line);
}
.pg-sol-stage .tv { width: min(84%, 420px); }
.pg-sol-stage .tv.tv-portrait { width: clamp(96px, 24%, 136px); }
.pg-sol-stage .tv-cap { display: none; }
.pg-sol-body { display: flex; flex-direction: column; gap: 12px; padding: 28px; flex: 1; }
@media (max-width: 699px) { .pg-sol-body { padding: 24px; } }
.pg-sol-title { margin: 0; color: var(--s-text); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.pg-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pg-tags li {
  padding: 5px 12px; border-radius: 999px; font-size: .8125rem; font-weight: 500; line-height: 1.4;
  background: #F7F8FA; border: 1px solid var(--s-line); color: #2E333B;
}
.pg-sol .pg-more { margin-top: auto; padding-top: 8px; min-height: 0; }
.pg-sol-other {
  --s-text: #FFFFFF; --s-text-2: #A7ADB7; --s-line: #262C35; --s-focus: #FF8A3D; --s-accent-text: #FF8A3D;
  --s-btn2-bg: transparent; --s-btn2-text: #FFFFFF; --s-btn2-line: #343A44; --s-btn2-hover-bg: #161A21; --s-btn2-hover-line: #4B5260;
  background: radial-gradient(80% 90% at 100% 0%, rgb(255 106 0 / .16), transparent 70%), #101319;
  border-color: #262C35; justify-content: flex-end; color-scheme: dark;
}
.pg-sol-other .pg-sol-body { justify-content: flex-end; padding: clamp(28px, 4vw, 40px); }
.pg-sol-other :focus-visible { outline-color: #FF8A3D; }

/* ---- Contact ------------------------------------------------------------------------------------ */
.pg-contact-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .pg-contact-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; } }
.pg-form-card { padding: clamp(24px, 4vw, 40px); gap: 0; }
.pg-form-title { margin-bottom: 24px; }
.pg-form { display: grid; gap: 20px; }
.pg-field-row { display: grid; gap: 20px; }
@media (min-width: 600px) { .pg-field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pg-field { display: grid; gap: 8px; min-width: 0; }
.pg-field label { color: var(--s-text); font-size: .9375rem; font-weight: 600; }
.pg-optional { color: var(--s-text-2); font-weight: 400; }
.pg-form input:not([type=hidden]), .pg-form select, .pg-form textarea, .pg-404-search input {
  width: 100%; min-width: 0; height: 48px; padding: 0 14px; border-radius: 9px;
  font: inherit; font-size: 1rem; line-height: 1.4; color: #111318; background: #FFFFFF;
  border: 1.5px solid #D1D5DB; transition: border-color .16s, box-shadow .16s;
}
.pg-form textarea { height: auto; min-height: 168px; padding: 12px 14px; resize: vertical; }
.pg-form select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235F6672' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.pg-form input:hover, .pg-form select:hover, .pg-form textarea:hover { border-color: #9CA3AF; }
.pg-form input:focus, .pg-form select:focus, .pg-form textarea:focus, .pg-404-search input:focus {
  outline: 2px solid transparent; border-color: var(--s-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-focus) 25%, transparent);
}
.pg-form [aria-invalid="true"] { border-color: #B91C1C; }
.pg-field-error { margin: 0; color: #B91C1C; font-size: .875rem; font-weight: 500; }
.pg-field-error::before { content: "! "; font-weight: 700; }
.pg-form-error { margin: 0; padding: 12px 16px; border-radius: 9px; background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; font-weight: 500; }
.pg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pg-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 4px; }
.pg-fine { margin: 0; color: var(--s-text-2); font-size: .875rem; flex: 1 1 220px; }
@media (max-width: 479px) { .pg-form-foot .btn { width: 100%; } }
.pg-notice-ok { padding: 24px; border-radius: 12px; background: #F0FDF4; border: 1px solid #BBF7D0; color: #14532D; }
.pg-notice-ok h2 { margin-bottom: 8px; color: #111318; }
.pg-notice-ok h2::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: #22C55E; vertical-align: 2px; }
.pg-notice-ok:focus-visible { outline: 3px solid var(--s-focus); outline-offset: 3px; }
.pg-side { padding: clamp(24px, 3vw, 32px); border-radius: 16px; background: #F7F8FA; border: 1px solid #E5E7EB; }
.pg-side .pg-h3 { font-size: 1.125rem; margin-bottom: 20px; }
.pg-side-list { display: grid; gap: 18px; color: var(--s-text-2); font-size: .9375rem; line-height: 1.55; }
.pg-side-list strong { display: block; color: var(--s-text); font-weight: 600; margin-bottom: 2px; }
.pg-side-foot { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid #E5E7EB; color: var(--s-text-2); font-size: .9375rem; overflow-wrap: anywhere; }

/* ---- Legal ------------------------------------------------------------------------------------------ */
.pg-draft {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 4px 12px; border-radius: 999px;
  font-size: .8125rem; font-weight: 600; color: #FBBF24;
  background: rgb(245 185 66 / .10); border: 1px solid rgb(245 185 66 / .35);
}
.pg-draft::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #F5B942; }
.pg-updated { margin: 16px 0 0; color: var(--s-text-2); font-size: .9375rem; }
.pg-doc-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .pg-doc-grid { grid-template-columns: 240px minmax(0, 1fr); gap: clamp(48px, 6vw, 88px); } }
.pg-doc-side { display: grid; gap: 28px; min-width: 0; }
@media (min-width: 900px) {
  .pg-doc-side { position: sticky; top: calc(var(--head-h, 76px) + 24px); max-height: calc(100vh - var(--head-h, 76px) - 48px); overflow-y: auto; padding-right: 4px; }
}
.pg-doc-nav { display: grid; gap: 2px; }
.pg-doc-nav a {
  display: flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 8px;
  color: var(--s-text-2); font-weight: 600; font-size: .9375rem; text-decoration: none;
}
.pg-doc-nav a:hover { background: #F7F8FA; color: var(--s-text); }
.pg-doc-nav a[aria-current] { background: #FFF1E6; color: var(--s-text); box-shadow: inset 3px 0 0 #FF6A00; }
.pg-toc h2 { margin: 0 0 12px; padding-left: 14px; color: var(--s-text-2); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pg-toc ol { display: grid; gap: 2px; font-size: .875rem; line-height: 1.4; border-left: 1px solid var(--s-line); margin-left: 14px; }
.pg-toc a { display: block; padding: 6px 0 6px 14px; color: var(--s-text-2); text-decoration: none; }
.pg-toc a:hover { color: var(--s-accent-text); text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 899px) {
  .pg-doc-nav { display: flex; flex-wrap: wrap; gap: 8px; }
  .pg-doc-nav a { border: 1px solid var(--s-line); border-radius: 999px; min-height: 40px; }
  .pg-toc { display: none; }
}
.pg-doc { max-width: 70ch; min-width: 0; font-size: 1.0625rem; line-height: 1.7; }
.pg-prose.pg-doc h2 { font-size: 1.5rem; margin-top: 48px; }
.pg-prose.pg-doc > h2:first-child { margin-top: 0; }
.pg-doc h3 { font-size: 1.1875rem; }
.pg-doc :is(h2, h3, h4)[id] { scroll-margin-top: calc(var(--head-h, 76px) + 24px); }

/* ---- 404 ------------------------------------------------------------------------------------------------ */
.pg-404 {
  padding-block: clamp(48px, 8vw, 120px);
  background: radial-gradient(50% 60% at 20% 60%, rgb(255 106 0 / .08), transparent 70%), #090B0F;
}
.pg-404-grid { display: grid; gap: clamp(40px, 6vw, 88px); align-items: center; }
@media (min-width: 800px) { .pg-404-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.pg-tvoff { max-width: 460px; width: 100%; margin-inline: auto; }
.pg-tvoff-bezel {
  position: relative; padding: 2.4% 2.4% 4.4%; border-radius: 10px;
  background: linear-gradient(180deg, #262C35, #050608 28%);
  box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 30px 80px -30px rgb(0 0 0 / .8);
}
.pg-tvoff-glass { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; background: #0B0D11; }
.pg-tvoff-static { position: absolute; inset: 0; opacity: .1; background-image: repeating-linear-gradient(0deg, #FFFFFF 0 1px, transparent 1px 3px); }
.pg-tvoff-code { position: relative; color: #6B7280; font-weight: 800; font-size: clamp(2.5rem, 7vw, 4rem); letter-spacing: .18em; font-variant-numeric: tabular-nums; }
.pg-tvoff-led { position: absolute; left: 50%; bottom: 1.6%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #EF4444; box-shadow: 0 0 8px 1px rgb(239 68 68 / .6); }
.pg-tvoff-stand { width: 26%; height: 14px; margin: 0 auto; background: linear-gradient(180deg, #161A21, #0B0D11); border-radius: 0 0 8px 8px; }
.pg-tvoff-cap { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 0; color: #A7ADB7; font-size: .875rem; font-weight: 600; }
.pg-tvoff-dot { width: 8px; height: 8px; border-radius: 50%; background: #EF4444; }
.pg-404-text { min-width: 0; }
.pg-404-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 36px; }
.pg-404-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 9px;
  border: 1.5px solid #343A44; color: #FFFFFF; font-weight: 600; font-size: .9375rem; text-decoration: none;
  transition: background-color .16s, border-color .16s;
}
.pg-404-links a:hover { background: #161A21; border-color: #4B5260; }
.pg-404-search label { display: block; margin-bottom: 8px; color: #FFFFFF; font-weight: 600; font-size: .9375rem; }
.pg-search-row { display: flex; gap: 8px; max-width: 520px; }
.pg-404-search input { flex: 1; border-color: transparent; }
.pg-404-search input::placeholder { color: #6B7280; }
.pg-search-row .btn { flex: none; height: 48px; }

/* ---- Final CTA: the .pg-cta rules for _cta.php live in site.css (pricing uses the partial without this file) */

/* ---- Motion ------------------------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .pg-card-link, .pg-card-link:hover { transition: none; transform: none; }
  .pg-arrow::after, .pg-more::after, .pg-faq-sign::before, .pg-faq-sign::after { transition: none; }
}
@media print {
  .pg-cta, .pg-doc-side { display: none; }
  .pg-hero { background: none; color: #000; }
}