/* ==========================================================================
   Info pages: the shared look of the site's text pages
   --------------------------------------------------------------------------
   Used by /how-rankings-work, /privacy, /terms and /dmca, and by the guide
   and site pages (vote return guide, referral program, about, contact).
   Each page loads it through the header hook:

       $page_styles = ['assets/css/info-page.css'];

   Layout, top to bottom: breadcrumb (.pol-crumbs), the .ph header from
   page-hero.css, then a two-column grid (.pol-grid) of content cards
   (.pol-main > .pol-sec) beside a sticky "On this page" list (.pol-side >
   .pol-toc). These rules used to sit, identical, in an inline <style> block
   in each of the four policy pages.
   ========================================================================== */
.pol {
    --pol-line: rgba(0, 255, 255, 0.12);
    --pol-ink: #d5d9e2;
    --pol-ink-2: #aab0bd;
    --pol-ink-3: #7c8594;
    padding-top: 10px;
    padding-bottom: 36px;
    font-family: var(--font-family, 'Rajdhani', sans-serif);
    color: var(--pol-ink);
}
.pol-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pol-ink-3);
}
.pol-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.pol-crumbs li + li::before { content: "\203A"; font-size: 1.05rem; line-height: 1; color: rgba(0, 255, 255, 0.5); }
.pol-crumbs a { color: var(--pol-ink-2); text-decoration: none; }
.pol-crumbs a:hover { color: #ffffff; }
.pol-crumbs a i { color: var(--primary-color, #00ffff); opacity: .8; font-size: .7rem; margin-right: 5px; }
.pol-crumbs [aria-current] { color: #ffffff; }
.pol .ph { margin-bottom: 14px; }
/* The intro is two sentences, so it is not clamped like the homepage lede */
.pol .ph-lede { display: block; overflow: visible; -webkit-line-clamp: unset; }
.pol .ph-stat-n small { font-size: .6em; font-weight: 600; color: var(--pol-ink-2); margin-left: 2px; }
.pol-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 14px;
    align-items: start;
}
.pol-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pol-sec {
    background: rgba(10, 10, 15, 0.9);
    border: 1px solid rgba(0, 255, 255, 0.16);
    padding: 18px 22px 8px;
    scroll-margin-top: 130px;
}
.pol-sec h2 {
    margin: 0 0 12px;
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .02em;
    color: #ffffff;
}
.pol-sec h3 {
    margin: 18px 0 8px;
    font-family: var(--font-family, 'Rajdhani', sans-serif);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary-color, #00ffff);
}
.pol-sec p,
.pol-sec li { font-size: 1.04rem; line-height: 1.65; color: var(--pol-ink); }
.pol-sec p { margin: 0 0 12px; }
.pol-sec ul,
.pol-sec ol { margin: 0 0 12px; padding-left: 1.3rem; }
.pol-sec li { margin: 0 0 6px; }
.pol-sec li::marker { color: var(--primary-color, #00ffff); }
.pol-sec strong { color: #ffffff; font-weight: 700; }
.pol-sec a {
    color: var(--primary-color, #00ffff);
    text-decoration: underline;
    text-decoration-color: rgba(0, 255, 255, 0.35);
    text-underline-offset: 3px;
}
.pol-sec a:hover { color: #ffffff; text-decoration-color: currentColor; }
.pol-sec code {
    padding: 1px 5px;
    background: rgba(0, 255, 255, 0.08);
    color: #9ffcff;
    font-size: .9em;
    word-break: break-word;
}
.pol-note {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-left: 3px solid var(--primary-color, #00ffff);
    background: rgba(0, 255, 255, 0.04);
}
.pol-table { margin: 0 0 14px; overflow-x: auto; }
.pol-table table { width: 100%; border-collapse: collapse; }
.pol-table th,
.pol-table td {
    padding: 8px 10px;
    border: 1px solid var(--pol-line);
    text-align: left;
    vertical-align: top;
    font-size: .98rem;
    line-height: 1.5;
    color: var(--pol-ink);
}
.pol-table th {
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pol-ink-3);
    background: rgba(0, 255, 255, 0.03);
}
.pol-side { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 14px; }
.pol-toc { background: rgba(10, 10, 15, 0.9); border: 1px solid rgba(0, 255, 255, 0.16); }
.pol-toc-h {
    margin: 0;
    padding: 11px 16px;
    border-bottom: 1px solid var(--pol-line);
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pol-ink-3);
}
.pol-toc ol { margin: 0; padding: 8px 0; list-style: none; }
.pol-toc a {
    display: block;
    padding: 5px 16px;
    border-left: 2px solid transparent;
    color: var(--pol-ink-2);
    font-size: .95rem;
    line-height: 1.35;
    text-decoration: none;
}
.pol-toc a:hover { color: #ffffff; border-left-color: var(--primary-color, #00ffff); background: rgba(0, 255, 255, 0.04); }
@media (max-width: 900px) {
    .pol-grid { grid-template-columns: minmax(0, 1fr); }
    .pol-side { position: static; order: -1; }
    .pol-toc ol { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
    .pol-toc a { padding: 4px 10px; border: 1px solid rgba(0, 255, 255, 0.22); font-size: .86rem; }
}
@media (max-width: 560px) {
    .pol-sec { padding: 16px 16px 6px; }
    /* Tables become one block per row: three columns do not fit a phone */
    .pol-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .pol-table table,
    .pol-table tbody,
    .pol-table tr,
    .pol-table td { display: block; width: 100%; }
    .pol-table tr { margin: 0 0 8px; border: 1px solid var(--pol-line); }
    .pol-table td { padding: 3px 12px; border: 0; }
    .pol-table td:first-child { padding-top: 10px; font-weight: 700; color: #ffffff; }
    .pol-table td:last-child { padding-bottom: 10px; }
    .pol-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--pol-ink-3); }
}

/* A section heading may open with an icon */
.pol-sec h2 > i:first-child { margin-right: 8px; font-size: .9em; color: var(--primary-color, #00ffff); }

/* ==========================================================================
   ip- components for the guide and site pages
   --------------------------------------------------------------------------
   They sit inside a .pol-sec card or straight in .pol-main. Their selectors
   name the element or carry one class more than the .pol-sec p / li / ul / a
   rules above, so those card rules cannot restyle a component from outside.
   Colours stay on the site's palette: cyan for the brand, and the dashboard's
   green, amber and red for success, warning and danger.
   ========================================================================== */
:root {
    --ip-line: rgba(0, 255, 255, 0.12);
    --ip-ink: #d5d9e2;
    --ip-ink-2: #aab0bd;
    --ip-ink-3: #7c8594;
    --ip-accent: var(--primary-color, #00ffff);
    --ip-success: #2ee6a0;
    --ip-warning: #ffc247;
    --ip-danger: #ff5c6c;
    --ip-display: var(--font-heading, 'Orbitron', sans-serif);
    --ip-body: var(--font-family, 'Rajdhani', sans-serif);
    --ip-mono: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
}
/* Components placed straight in the page column use its 14px gap */
.pol-main > :is(.ip-cta, .ip-grid, .ip-callout, .ip-faq, .ip-team, .ip-table, .ip-steps) { margin: 0; }

/* ---------- lead paragraph, eyebrow, badges ---------- */
p.ip-lead { margin: 0 0 14px; font-size: 1.16rem; line-height: 1.6; color: #e6e9ef; }
.ip-eyebrow {
    display: block;
    margin: 0 0 6px;
    font-family: var(--ip-display);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ip-accent);
}
.ip-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border: 1px solid rgba(0, 255, 255, 0.35);
    background: rgba(0, 255, 255, 0.07);
    font-family: var(--ip-display);
    font-size: .58rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--ip-accent);
}
/* the header's HTML minifier deletes the space between two tags */
.ip-badge + .ip-badge { margin-left: 6px; }
.ip-badge--success { border-color: rgba(46, 230, 160, 0.4); background: rgba(46, 230, 160, 0.08); color: var(--ip-success); }
.ip-badge--warning { border-color: rgba(255, 194, 71, 0.4); background: rgba(255, 194, 71, 0.08); color: var(--ip-warning); }
.ip-badge--muted { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); color: var(--ip-ink-2); }

/* ---------- buttons ----------
   .ip-btn: cyan outline, like the header's Add Server. --primary: the glass
   of the Vote button. --ghost: text only. --sm, --block. Colours come from
   custom properties, so a variant needs no extra weight to win. */
.ip-btn {
    --ipb-bg: transparent;
    --ipb-bd: rgba(0, 255, 255, 0.45);
    --ipb-fg: var(--ip-accent);
    --ipb-sh: none;
    --ipb-ts: none;
    --ipb-bg-h: rgba(0, 255, 255, 0.09);
    --ipb-bd-h: var(--ip-accent);
    --ipb-fg-h: #ffffff;
    --ipb-sh-h: 0 0 16px rgba(0, 255, 255, 0.18);
}
a.ip-btn,
button.ip-btn,
.ip-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid var(--ipb-bd);
    border-radius: 0;
    background: var(--ipb-bg);
    box-shadow: var(--ipb-sh);
    color: var(--ipb-fg);
    font-family: var(--ip-body);
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    text-shadow: var(--ipb-ts);
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    transition: background .18s, border-color .18s, box-shadow .18s, color .18s;
}
a.ip-btn:hover,
button.ip-btn:hover,
.ip-btn:hover {
    background: var(--ipb-bg-h);
    border-color: var(--ipb-bd-h);
    box-shadow: var(--ipb-sh-h);
    color: var(--ipb-fg-h);
    text-decoration: none;
    text-shadow: var(--ipb-ts);
}
.ip-btn:focus-visible { outline: 2px solid #99ffff; outline-offset: 2px; }
.ip-btn > i { font-size: .85em; }
.ip-btn--primary {
    --ipb-bg: linear-gradient(180deg, rgba(0, 255, 255, 0.22) 0%, rgba(0, 255, 255, 0.08) 100%);
    --ipb-bd: rgba(0, 255, 255, 0.55);
    --ipb-fg: #e6feff;
    --ipb-sh: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    --ipb-ts: 0 0 9px rgba(0, 255, 255, 0.35);
    --ipb-bg-h: linear-gradient(180deg, rgba(0, 255, 255, 0.36) 0%, rgba(0, 255, 255, 0.15) 100%);
    --ipb-bd-h: rgba(0, 255, 255, 0.85);
    --ipb-sh-h: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 18px rgba(0, 255, 255, 0.24);
}
/* the sheen across the top half, as on the Vote button */
.ip-btn--primary::after {
    content: "";
    position: absolute;
    inset: 0 0 55% 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    pointer-events: none;
}
.ip-btn--ghost {
    --ipb-bd: transparent;
    --ipb-fg: var(--ip-ink-2);
    --ipb-bg-h: rgba(255, 255, 255, 0.05);
    --ipb-bd-h: rgba(255, 255, 255, 0.08);
    --ipb-sh-h: none;
}
a.ip-btn--sm, button.ip-btn--sm, .ip-btn--sm { min-height: 34px; padding: 0 12px; font-size: .82rem; gap: 6px; }
a.ip-btn--block, button.ip-btn--block, .ip-btn--block { display: flex; width: 100%; }
.ip-btn[disabled], .ip-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.ip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.pol-sec > a.ip-btn,
.pol-sec > button.ip-btn { margin-bottom: 14px; }

/* ---------- numbered steps ----------
   <ol class="ip-steps"><li class="ip-step"><span class="ip-step__n">1</span>
   <h3 class="ip-step__title">..</h3><p class="ip-step__text">..</p></li></ol>
   An empty .ip-step__n numbers itself. */
ol.ip-steps,
ul.ip-steps,
.ip-steps {
    counter-reset: ip-step;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}
.ip-steps > .ip-step {
    counter-increment: ip-step;
    position: relative;
    min-height: 38px;
    margin: 0;
    padding: 0 0 20px 54px;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--ip-ink);
}
.ip-steps > .ip-step:last-child { padding-bottom: 2px; }
/* the rail from one number down to the next */
.ip-steps > .ip-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 44px;
    bottom: 6px;
    width: 1px;
    background: linear-gradient(180deg, rgba(0, 255, 255, 0.4), rgba(0, 255, 255, 0.08));
}
.ip-step .ip-step__n {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(0, 255, 255, 0.45);
    background: linear-gradient(180deg, rgba(0, 255, 255, 0.18) 0%, rgba(0, 255, 255, 0.05) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 12px rgba(0, 255, 255, 0.1);
    font-family: var(--ip-display);
    font-size: .9rem;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}
.ip-step .ip-step__n:empty::before { content: counter(ip-step); }
.ip-step .ip-step__title {
    display: block;
    margin: 7px 0 4px;
    font-family: var(--ip-body);
    font-size: 1.14rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    color: #ffffff;
}
.ip-step .ip-step__text { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.6; color: var(--ip-ink); }
.ip-step > :last-child { margin-bottom: 0; }

/* ---------- card grid ----------
   .ip-grid fits as many 210px columns as there is room for; --2 and --3 fix
   the count (3 -> 2 under 760px, 1 under 560px). */
ul.ip-grid,
ol.ip-grid,
.ip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}
.ip-grid.ip-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ip-grid.ip-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ip-grid > .ip-card,
.ip-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 16px 16px 15px;
    border: 1px solid rgba(0, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(0, 255, 255, 0.045) 0%, rgba(0, 255, 255, 0.01) 100%);
    color: var(--ip-ink);
    font-size: 1rem;
    line-height: 1.55;
    text-decoration: none;
}
/* lit top edge */
.ip-card::before {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.6), rgba(0, 255, 255, 0) 75%);
}
.ip-card .ip-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin: 0 0 6px;
    border: 1px solid rgba(0, 255, 255, 0.3);
    background: rgba(0, 255, 255, 0.07);
    color: var(--ip-accent);
    font-size: 1.05rem;
    line-height: 1;
}
.ip-card .ip-card__title {
    margin: 0;
    font-family: var(--ip-body);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    color: #ffffff;
}
.ip-card .ip-card__value {
    margin: 0;
    font-family: var(--ip-display);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}
.ip-card .ip-card__value small { margin-left: 3px; font-size: .55em; font-weight: 600; color: var(--ip-ink-2); }
.ip-card .ip-card__text { margin: 0; font-size: .99rem; line-height: 1.55; color: var(--ip-ink-2); }
.ip-card > :last-child { margin-bottom: 0; }
.ip-card .ip-card__more {
    margin-top: auto;
    padding-top: 6px;
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ip-accent);
}
/* a card that is a link */
a.ip-card { transition: border-color .15s, background .15s; }
a.ip-card:hover {
    border-color: rgba(0, 255, 255, 0.45);
    background: linear-gradient(180deg, rgba(0, 255, 255, 0.09) 0%, rgba(0, 255, 255, 0.025) 100%);
    color: var(--ip-ink);
    text-decoration: none;
    text-shadow: none;
}
a.ip-card:hover .ip-card__title { color: var(--ip-accent); }
a.ip-card:focus-visible { outline: 2px solid var(--ip-accent); outline-offset: 2px; }

/* ---------- callouts ---------- */
.ip-callout {
    --ipc: var(--ip-accent);
    --ipc-bd: rgba(0, 255, 255, 0.22);
    --ipc-bg: rgba(0, 255, 255, 0.045);
    margin: 0 0 14px;
    padding: 13px 16px 13px 15px;
    border: 1px solid var(--ipc-bd);
    border-left: 3px solid var(--ipc);
    background: var(--ipc-bg);
    color: var(--ip-ink);
    font-size: 1.02rem;
    line-height: 1.6;
}
.ip-callout--success { --ipc: var(--ip-success); --ipc-bd: rgba(46, 230, 160, 0.24); --ipc-bg: rgba(46, 230, 160, 0.05); }
.ip-callout--warning { --ipc: var(--ip-warning); --ipc-bd: rgba(255, 194, 71, 0.26); --ipc-bg: rgba(255, 194, 71, 0.05); }
.ip-callout--danger { --ipc: var(--ip-danger); --ipc-bd: rgba(255, 92, 108, 0.28); --ipc-bg: rgba(255, 92, 108, 0.05); }
.ip-callout .ip-callout__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 5px;
    font-family: var(--ip-display);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ipc);
}
.ip-callout .ip-callout__title i { font-size: .95rem; }
.ip-callout p { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.6; }
.ip-callout ul, .ip-callout ol { margin: 0 0 8px; }
.ip-callout > :last-child { margin-bottom: 0; }

/* ---------- FAQ accordion (details/summary, no script) ---------- */
.ip-faq {
    margin: 0 0 14px;
    border: 1px solid rgba(0, 255, 255, 0.16);
    background: rgba(10, 10, 15, 0.6);
}
.ip-faq > .ip-faq__item { margin: 0; border-top: 1px solid var(--ip-line); }
.ip-faq > .ip-faq__item:first-child { border-top: 0; }
.ip-faq .ip-faq__item > summary {
    position: relative;
    display: block;
    padding: 14px 52px 14px 18px;
    list-style: none;
    cursor: pointer;
    font-family: var(--ip-body);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
    transition: color .15s, background .15s;
}
.ip-faq .ip-faq__item > summary::-webkit-details-marker { display: none; }
.ip-faq .ip-faq__item > summary::marker { content: ""; }
/* a plus that turns into a minus */
.ip-faq .ip-faq__item > summary::before,
.ip-faq .ip-faq__item > summary::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 12px;
    height: 2px;
    margin-top: -1px;
    background: var(--ip-accent);
    transition: transform .2s ease;
}
.ip-faq .ip-faq__item > summary::after { transform: rotate(90deg); }
.ip-faq .ip-faq__item[open] > summary::after { transform: rotate(0deg); }
.ip-faq .ip-faq__item > summary:hover { color: var(--ip-accent); background: rgba(0, 255, 255, 0.03); }
.ip-faq .ip-faq__item > summary:focus-visible { outline: 2px solid var(--ip-accent); outline-offset: -2px; }
.ip-faq .ip-faq__item[open] { background: rgba(0, 255, 255, 0.025); box-shadow: inset 2px 0 0 var(--ip-accent); }
.ip-faq .ip-faq__item[open] > summary { color: var(--ip-accent); }
.ip-faq .ip-faq__body { padding: 0 18px 14px; font-size: 1.02rem; line-height: 1.6; color: var(--ip-ink); }
.ip-faq .ip-faq__body p { margin: 0 0 10px; font-size: 1.02rem; }
.ip-faq .ip-faq__body > :last-child { margin-bottom: 0; }

/* ---------- code blocks and copy buttons ----------
   <div class="ip-code"><div class="ip-code__head"><span class="ip-code__label">PHP</span>
   <button type="button" class="ip-copy" data-copy="#x">Copy</button></div>
   <pre id="x"><code>..</code></pre></div>     (or a bare <pre class="ip-code">) */
.ip-code {
    position: relative;
    min-width: 0;
    margin: 0 0 14px;
    border: 1px solid rgba(0, 255, 255, 0.18);
    background: #07070c;
}
.ip-code .ip-code__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    padding: 0 6px 0 14px;
    border-bottom: 1px solid var(--ip-line);
    background: rgba(0, 255, 255, 0.04);
}
.ip-code .ip-code__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--ip-display);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ip-ink-3);
}
.ip-code .ip-code__label i { color: var(--ip-accent); font-size: .8rem; opacity: .85; }
/* The code samples scroll sideways on phones: they take the keyboard focus (tabindex="0") so the
   arrow keys can scroll them; show where the focus is */
.ip-code pre:focus-visible, pre.vr-url:focus-visible { outline: 2px solid var(--primary-color, #00ffff); outline-offset: 2px; }
.ip-code pre,
pre.ip-code {
    margin: 0;
    padding: 14px 16px;
    overflow-x: auto;
    font-family: var(--ip-mono);
    font-size: .84rem;
    line-height: 1.65;
    color: #cfefff;
    white-space: pre;
    tab-size: 4;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 255, 255, 0.25) transparent;
}
pre.ip-code { margin: 0 0 14px; }
.ip-code code,
pre.ip-code code {
    padding: 0;
    background: none;
    color: inherit;
    font: inherit;
    word-break: normal;
    white-space: inherit;
}
/* a copy button inside a code block without a head sits in its corner */
.ip-code > .ip-copy { position: absolute; top: 8px; right: 8px; background: #0b0b12; box-shadow: -18px 0 14px -4px #07070c, 8px 0 0 0 #07070c; }
/* optional token colours: comment, keyword, string, variable */
.ip-code .ip-tok-c { color: #6f7c8f; }
.ip-code .ip-tok-k { color: #00e1ff; }
.ip-code .ip-tok-s { color: #a5f0c4; }
.ip-code .ip-tok-v { color: #ffd88a; }
button.ip-copy,
.ip-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 30px;
    margin: 0;
    padding: 0 11px;
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 0;
    background: rgba(10, 10, 15, 0.85);
    color: var(--ip-ink-2);
    font-family: var(--ip-body);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
button.ip-copy:hover, .ip-copy:hover { color: #ffffff; border-color: var(--ip-accent); background: rgba(0, 255, 255, 0.09); }
.ip-copy:focus-visible { outline: 2px solid var(--ip-accent); outline-offset: 2px; }
.ip-copy i { font-size: .85em; color: var(--ip-accent); }
button.ip-copy.is-copied, .ip-copy.is-copied { color: var(--ip-success); border-color: rgba(46, 230, 160, 0.55); background: rgba(46, 230, 160, 0.08); }
.ip-copy.is-copied i { color: var(--ip-success); }
/* one value to copy, such as a link: the value and its button on one line */
.ip-copyrow {
    display: flex;
    align-items: stretch;
    min-width: 0;
    margin: 0 0 14px;
    border: 1px solid rgba(0, 255, 255, 0.22);
    background: #07070c;
}
.ip-copyrow > code,
.ip-copyrow > .ip-copyrow__value {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 9px 14px;
    overflow-x: auto;
    background: none;
    color: #cfefff;
    font-family: var(--ip-mono);
    font-size: .86rem;
    line-height: 1.4;
    white-space: nowrap;
    word-break: normal;
    scrollbar-width: none;
}
.ip-copyrow > .ip-copy { height: auto; min-height: 40px; border-width: 0 0 0 1px; }

/* ---------- call to action band ----------
   <div class="ip-cta"><div class="ip-cta__body"><h2 class="ip-cta__title">..</h2>
   <p class="ip-cta__text">..</p></div><div class="ip-cta__actions">buttons</div></div> */
.ip-cta {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 28px;
    margin: 0 0 14px;
    padding: 22px 24px;
    border: 1px solid rgba(0, 255, 255, 0.3);
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(0, 255, 255, 0.13) 0%, rgba(0, 255, 255, 0) 55%),
        rgba(10, 10, 15, 0.94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 26px rgba(0, 255, 255, 0.06);
    overflow: hidden;
}
/* a lit strip along the top edge */
.ip-cta::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 38%;
    height: 2px;
    background: linear-gradient(90deg, var(--ip-accent), rgba(0, 255, 255, 0));
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
}
.ip-cta > .ip-cta__body { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
.ip-cta > .ip-cta__title { grid-column: 1; grid-row: 1; }
.ip-cta > .ip-cta__text { grid-column: 1; grid-row: 2; }
.ip-cta > .ip-cta__actions { grid-column: 2; grid-row: 1 / span 2; }
.ip-cta .ip-cta__title {
    margin: 0 0 4px;
    font-family: var(--ip-display);
    font-size: clamp(1.02rem, .95rem + .35vw, 1.25rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .01em;
    color: #ffffff;
    text-wrap: balance;
}
.ip-cta .ip-cta__title em { font-style: normal; color: var(--ip-accent); text-shadow: 0 0 14px rgba(0, 255, 255, 0.35); }
.ip-cta .ip-cta__text { margin: 0; max-width: 62ch; font-size: 1.02rem; line-height: 1.55; color: var(--ip-ink-2); }
.ip-cta .ip-cta__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

/* ---------- small data table ----------
   <div class="ip-table"><table>..</table></div>. .is-num right-aligns a
   figure; tr.is-hl marks a row; .ip-table--stack turns rows into blocks on
   phones (give each td a data-label). */
.ip-table {
    min-width: 0;
    margin: 0 0 14px;
    overflow-x: auto;
    border: 1px solid rgba(0, 255, 255, 0.16);
    background: rgba(0, 255, 255, 0.015);
}
.ip-table table { width: 100%; margin: 0; border-collapse: collapse; }
.ip-table th,
.ip-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--ip-line);
    text-align: left;
    vertical-align: top;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--ip-ink);
}
.ip-table thead th {
    padding-top: 9px;
    padding-bottom: 9px;
    border-bottom-color: rgba(0, 255, 255, 0.2);
    background: rgba(0, 255, 255, 0.045);
    font-family: var(--ip-display);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ip-ink-3);
    vertical-align: bottom;
}
.ip-table tbody th { font-weight: 700; color: #ffffff; }
.ip-table tbody tr:last-child > * { border-bottom: 0; }
.ip-table tbody tr:hover > * { background: rgba(0, 255, 255, 0.03); }
.ip-table .is-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ip-table td.is-num { font-weight: 700; color: #ffffff; }
.ip-table tr.is-hl > * { background: rgba(0, 255, 255, 0.06); }
.ip-table tr.is-hl > :first-child { box-shadow: inset 2px 0 0 var(--ip-accent); }

/* ---------- team ---------- */
ul.ip-team,
.ip-team {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}
.ip-team > .ip-member,
.ip-member {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
        "avatar name"
        "avatar role"
        "text   text"
        "links  links";
    align-content: start;
    column-gap: 14px;
    min-width: 0;
    margin: 0;
    padding: 16px;
    border: 1px solid rgba(0, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(0, 255, 255, 0.045) 0%, rgba(0, 255, 255, 0.01) 100%);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ip-ink);
}
.ip-member::before {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.6), rgba(0, 255, 255, 0) 75%);
}
.ip-member .ip-member__avatar {
    grid-area: avatar;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border: 1px solid rgba(0, 255, 255, 0.4);
    background: rgba(0, 255, 255, 0.07);
    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.05), 0 0 14px rgba(0, 255, 255, 0.12);
    object-fit: cover;
    font-family: var(--ip-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ip-accent);
    overflow: hidden;
}
.ip-member .ip-member__name {
    grid-area: name;
    align-self: end;
    margin: 0;
    font-family: var(--ip-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .02em;
    color: #ffffff;
}
.ip-member .ip-member__role {
    grid-area: role;
    align-self: start;
    margin: 4px 0 0;
    font-family: var(--ip-display);
    font-size: .6rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ip-accent);
}
.ip-member .ip-member__text { grid-area: text; margin: 12px 0 0; font-size: .99rem; line-height: 1.55; color: var(--ip-ink-2); }
.ip-member .ip-member__links { grid-area: links; display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }

/* ---------- check and cross lists ---------- */
ul.ip-list,
ol.ip-list,
.ip-list { margin: 0 0 12px; padding: 0; list-style: none; }
.ip-list > li { position: relative; margin: 0 0 8px; padding-left: 28px; }
.ip-list--check > li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: .42em;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--ip-success);
    border-bottom: 2px solid var(--ip-success);
    transform: rotate(-45deg);
}
.ip-list--cross > li::before,
.ip-list--cross > li::after {
    content: "";
    position: absolute;
    left: 2px;
    top: .72em;
    width: 14px;
    height: 2px;
    background: var(--ip-danger);
    transform: rotate(45deg);
}
.ip-list--cross > li::after { transform: rotate(-45deg); }

/* ---------- key facts (dl) ---------- */
.ip-facts {
    display: grid;
    grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
    margin: 0 0 14px;
    border: 1px solid rgba(0, 255, 255, 0.16);
}
.ip-facts > dt,
.ip-facts > dd { margin: 0; padding: 10px 14px; border-top: 1px solid var(--ip-line); }
.ip-facts > dt:first-of-type,
.ip-facts > dt:first-of-type + dd { border-top: 0; }
.ip-facts > dt {
    display: flex;
    align-items: center;
    background: rgba(0, 255, 255, 0.04);
    font-family: var(--ip-display);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ip-ink-3);
}
.ip-facts > dd { font-size: 1.02rem; font-weight: 600; line-height: 1.5; color: #ffffff; }
.ip-facts > dd small { font-weight: 500; color: var(--ip-ink-2); }

/* ---------- forms ----------
   <form class="ip-form"> > .ip-field (or .ip-form__row of two fields) >
   label.ip-label (+ span.ip-req / span.ip-optional), .ip-input / .ip-textarea
   / .ip-select, p.ip-help, p.ip-error. A field in error: .ip-field.has-error
   (or aria-invalid="true" on the control). Buttons in .ip-form__actions. */
.ip-form { display: grid; gap: 18px; margin: 0 0 14px; }
.ip-form .ip-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ip-form .ip-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 0; }
.ip-form .ip-label {
    display: block;
    margin: 0;
    font-family: var(--ip-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .02em;
    color: #e6e9ef;
}
.ip-form .ip-req { margin-left: 3px; color: var(--ip-accent); }
.ip-form .ip-optional,
.ip-form .ip-opt { margin-left: 5px; font-size: .86em; font-weight: 500; color: var(--ip-ink-3); }
.ip-form .ip-input,
.ip-form .ip-textarea,
.ip-form .ip-select {
    display: block;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 10px 13px;
    border: 1px solid rgba(0, 255, 255, 0.22);
    border-radius: 0;
    background-color: #0c0c12;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
    color: #e9edf3;
    font-family: var(--ip-body);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.4;
    color-scheme: dark;
    transition: border-color .15s, box-shadow .15s;
}
.ip-form .ip-textarea { min-height: 160px; resize: vertical; line-height: 1.55; }
.ip-form .ip-select {
    padding-right: 40px;
    -webkit-appearance: none;
    appearance: none;
    background-image: 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='%2300ffff' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    cursor: pointer;
}
.ip-form .ip-input::placeholder,
.ip-form .ip-textarea::placeholder { color: #7e8798; opacity: 1; } /* was #5d6676: 3.4:1, now 5.4:1 */
.ip-form .ip-input:hover,
.ip-form .ip-textarea:hover,
.ip-form .ip-select:hover { border-color: rgba(0, 255, 255, 0.4); }
.ip-form .ip-input:focus,
.ip-form .ip-textarea:focus,
.ip-form .ip-select:focus {
    outline: none;
    border-color: var(--ip-accent);
    background-color: #0e0e16;
    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.16), inset 0 1px 3px rgba(0, 0, 0, 0.45);
}
.ip-form .ip-help { margin: 0; font-size: .92rem; font-weight: 500; line-height: 1.45; color: var(--ip-ink-3); }
.ip-form .ip-error {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    font-size: .94rem;
    font-weight: 600;
    line-height: 1.4;
    color: #ff8a96;
}
.ip-form .ip-error i { margin-top: 3px; }
.ip-form .has-error .ip-input,
.ip-form .has-error .ip-textarea,
.ip-form .has-error .ip-select,
.ip-form .is-invalid .ip-input,
.ip-form .is-invalid .ip-textarea,
.ip-form .is-invalid .ip-select,
.ip-form [aria-invalid="true"] { border-color: rgba(255, 92, 108, 0.75); }
.ip-form .has-error .ip-input:focus,
.ip-form .has-error .ip-textarea:focus,
.ip-form .has-error .ip-select:focus,
.ip-form [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(255, 92, 108, 0.18); }
.ip-form .ip-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 1rem; line-height: 1.45; color: var(--ip-ink); cursor: pointer; }
.ip-form .ip-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ip-accent); color-scheme: dark; }
.ip-form .ip-counter { margin: 0; font-size: .84rem; color: var(--ip-ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.ip-form .ip-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ip-form .ip-form__actions .ip-help { flex: 1 1 220px; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
    .ip-grid.ip-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ip-cta { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
    .ip-cta > .ip-cta__body,
    .ip-cta > .ip-cta__title,
    .ip-cta > .ip-cta__text,
    .ip-cta > .ip-cta__actions { grid-column: 1; grid-row: auto; }
    .ip-cta .ip-cta__actions { justify-content: flex-start; margin-top: 12px; }
}
@media (max-width: 860px) {
    /* page-hero.css puts the figures in two columns here; an odd last one
       would leave an empty tinted cell beside it */
    .pol .ph-stats > .ph-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .ip-form .ip-form__row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .ip-grid.ip-grid--2,
    .ip-grid.ip-grid--3 { grid-template-columns: minmax(0, 1fr); }
    .ip-steps > .ip-step { padding-left: 48px; }
    .ip-step .ip-step__n { width: 34px; height: 34px; font-size: .82rem; }
    .ip-steps > .ip-step:not(:last-child)::before { left: 16px; top: 40px; }
    .ip-step .ip-step__title { margin-top: 5px; }
    .ip-faq .ip-faq__item > summary { padding: 13px 44px 13px 14px; font-size: 1.04rem; }
    .ip-faq .ip-faq__item > summary::before,
    .ip-faq .ip-faq__item > summary::after { right: 16px; }
    .ip-faq .ip-faq__body { padding: 0 14px 13px; }
    .ip-cta .ip-cta__actions > .ip-btn { flex: 1 1 auto; }
    .ip-code pre, pre.ip-code { padding: 12px; font-size: .8rem; }
    .ip-facts { grid-template-columns: minmax(0, 1fr); }
    .ip-facts > dt { padding-bottom: 2px; background: none; }
    .ip-facts > dd { padding-top: 0; border-top: 0; }
    /* two groups in the hero tab bar: each label and row gets its own line */
    .pol .ph-bar > .ph-sep { display: none; }
    .ip-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .ip-table--stack table,
    .ip-table--stack tbody,
    .ip-table--stack tr,
    .ip-table--stack th,
    .ip-table--stack td { display: block; width: 100%; }
    .ip-table--stack tr { padding: 8px 0; border-bottom: 1px solid var(--ip-line); }
    .ip-table--stack tbody tr:last-child { border-bottom: 0; }
    .ip-table--stack th,
    .ip-table--stack td { padding: 3px 14px; border: 0; text-align: left; }
    .ip-table--stack .is-num { text-align: left; }
    .ip-table--stack td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--ip-ink-3); }
}
@media (prefers-reduced-motion: reduce) {
    .ip-btn, .ip-card, .ip-copy, .ip-faq .ip-faq__item > summary,
    .ip-faq .ip-faq__item > summary::before, .ip-faq .ip-faq__item > summary::after { transition: none; }
}