and add
this modifier let the body's 10vw frame set the true left/right edge
instead, with zero extra gutter on top. .pp2-sec-intro / .pp2-body-p cap
their own prose width for legibility, so .pp2-content itself is free to
fill the full column. Scoped per-page (not applied to the base
.pp2-wrap) so the other pages sharing this file are unaffected until
they opt in the same way. */
.pp2-wrap.pp2-wrap--wide {
--maxw: 100%;
--gutter: 0px;
}
/* Edge-to-edge with the site's 10vw body frame — matches the header and
footer exactly (see ig-theme.css "GLOBAL LAYOUT" / "SHARED SITE
CONTAINER"). Bootstrap's own .container gutter/max-width is zeroed here
so this page's content lands on the same left/right line as the header
logo and footer columns, instead of drifting in from a second, narrower
cap. Scoped to .pp2-outer so other pages sharing this stylesheet are
unaffected until they opt in the same way. */
.pp2-outer > .container {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Hero alignment — .igleg-lhdr__inner (ig-theme.css) normally caps at
1680px and adds its own 40px padding-inline, which is invisible on
plain legal pages but drifts narrower than this page's wide-mode
content below it (zero extra padding, no max-width cap) once the
viewport passes ~1760px. Scoped to .pp2-page-lhdr so the shared
component's default behavior on other pages is untouched. */
.pp2-page-lhdr .igleg-lhdr__inner {
max-width: 100% !important;
padding-inline: 0 !important;
}
.pp2-wrap *, .pp2-wrap *::before, .pp2-wrap *::after { box-sizing: border-box; }
.pp2-wrap h1, .pp2-wrap h2, .pp2-wrap h3,
.pp2-wrap h4, .pp2-wrap h5, .pp2-wrap h6 {
color: inherit !important;
font-family: var(--font) !important;
text-transform: none !important;
}
.pp2-wrap ::selection { background: var(--cr-sm); color: var(--cr-h); }
/* Layout / overflow fix — .fix{overflow:hidden} on .main-area kills position:sticky */
main.main-area { overflow: visible !important; }
/* ════════════════════════════════════════════════════════════
EFFECTIVE DATE LINE
════════════════════════════════════════════════════════════ */
.pp2-effective-date {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: .72rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--text-2, #4B5563);
background: var(--bg-soft, #F9FAFB);
border: 1px solid var(--border, rgba(17,24,39,.10));
border-radius: 100px;
padding: 6px 14px;
margin: 0 0 18px;
}
.pp2-effective-date__icon { color: var(--cr, #A41034); flex-shrink: 0; }
.pp2-effective-date__sep {
width: 3px; height: 3px; border-radius: 50%;
background: var(--text-3, #9CA3AF); flex-shrink: 0;
}
/* ════════════════════════════════════════════════════════════
READING PROGRESS BAR
════════════════════════════════════════════════════════════ */
.pp2-progress-bar {
position: fixed;
top: 0; left: 0; right: 0;
height: 2px;
z-index: 10000;
pointer-events: none;
background: transparent;
}
.pp2-progress-bar__fill {
height: 100%;
width: 0%;
background: var(--cr);
transition: width .1s linear;
}
/* ════════════════════════════════════════════════════════════
HERO — compact, flat, white (other pp2- legal pages)
════════════════════════════════════════════════════════════ */
.pp2-hero {
background: var(--bg);
color: var(--ink);
border-bottom: 1px solid var(--border);
position: relative;
}
.pp2-hero::before,
.pp2-hero::after { display: none !important; }
.pp2-hero__corner { display: none; }
.pp2-hero__inner {
max-width: var(--maxw);
margin: 0 auto;
padding: var(--sp-6) var(--gutter) var(--sp-5);
}
/* Breadcrumb */
.pp2-breadcrumb ol {
list-style: none;
padding: 0; margin: 0 0 var(--sp-4);
display: flex; align-items: center; gap: 6px;
font-size: 12px;
color: var(--text-3);
}
.pp2-breadcrumb a {
color: var(--text-2);
text-decoration: none;
transition: color .15s;
}
.pp2-breadcrumb a:hover { color: var(--cr); }
.pp2-breadcrumb__sep { color: var(--border-md); }
.pp2-breadcrumb [aria-current="page"] { color: var(--text); font-weight: 500; }
/* Eyebrow */
.pp2-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cr);
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 var(--sp-3);
}
.pp2-eyebrow__rule {
display: inline-block;
width: 20px; height: 2px;
background: var(--cr);
border-radius: 2px;
}
/* H1 */
.pp2-hero__h1 {
font-size: clamp(26px, 3.4vw, 38px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--ink) !important;
margin: 0 0 var(--sp-3);
}
.pp2-hero__h1 em {
font-style: italic;
font-weight: 600;
color: var(--cr) !important;
}
/* Lede */
.pp2-hero__lede {
font-size: 14.5px;
line-height: 1.6;
color: var(--text-2);
max-width: 560px;
margin: 0 0 var(--sp-5);
font-weight: 400;
}
/* Meta row */
.pp2-hero__meta {
display: flex;
flex-wrap: wrap;
gap: var(--sp-5) var(--sp-6);
margin: 0; padding: 0;
border-top: 1px solid var(--border);
padding-top: var(--sp-4);
}
.pp2-hero__meta-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.pp2-hero__meta-item dt {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-3);
margin: 0;
}
.pp2-hero__meta-item dd {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--ink);
}
.pp2-hero__meta-item dd a {
color: var(--cr);
text-decoration: none;
}
.pp2-hero__meta-item dd a:hover { text-decoration: underline; }
/* ════════════════════════════════════════════════════════════
TL;DR SUMMARY CARD
════════════════════════════════════════════════════════════ */
.pp2-summary-wrap {
max-width: var(--maxw);
margin: 0 auto;
padding: var(--sp-4) var(--gutter) 0;
}
.pp2-summary-card {
background: var(--bg);
border: 1px solid var(--border);
border-left: 3px solid var(--cr);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: var(--sp-4) var(--sp-5);
display: grid;
grid-template-columns: max-content 1fr;
gap: var(--sp-5);
align-items: baseline;
}
.pp2-summary-card__label { display: flex; align-items: baseline; }
.pp2-summary-card__kicker {
display: inline-block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--cr);
white-space: nowrap;
}
.pp2-summary-card__tldr { display: none; }
.pp2-summary-card__body p {
margin: 0;
font-size: 14.5px;
line-height: 1.65;
color: var(--text-2);
}
.pp2-summary-card__body strong { color: var(--text); font-weight: 600; }
.pp2-summary-card__body a {
color: var(--cr);
font-weight: 500;
text-decoration: none;
}
.pp2-summary-card__body a:hover { text-decoration: underline; }
/* ════════════════════════════════════════════════════════════
TRUST STRIP (privacy-policy only) — colored metric cards,
mirrors .ia-metric in instructor-agreement.css. pp2h- namespaced
so the other legal pages keep their slim inline chip strip.
════════════════════════════════════════════════════════════ */
.pp2h-metrics {
max-width: var(--maxw);
margin: 0 auto;
padding: var(--sp-4) var(--gutter) 0;
}
.pp2h-metrics__inner {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.pp2h-metric {
position: relative;
overflow: hidden;
padding: 16px 16px 14px;
border: 1.5px solid var(--border);
border-radius: 12px;
background: var(--bg);
display: flex;
align-items: center;
gap: 12px;
transition: border-color .18s, box-shadow .18s, transform .18s;
}
.pp2h-metric::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 3px;
border-radius: 12px 12px 0 0;
background: var(--cr);
}
.pp2h-metric:hover { transform: translateY(-2px); }
.pp2h-metric__icon {
width: 38px; height: 38px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.pp2h-metric__val {
font-size: 15px; font-weight: 700;
color: var(--ink); line-height: 1.15;
letter-spacing: -.01em;
white-space: nowrap;
}
.pp2h-metric__label {
font-size: 11.5px; font-weight: 600; color: var(--text-3);
text-transform: uppercase; letter-spacing: .05em; margin-top: 2px;
white-space: nowrap;
}
.pp2h-metric--red::before { background: #ef4444; }
.pp2h-metric--amber::before { background: #f59e0b; }
.pp2h-metric--green::before { background: #10b981; }
.pp2h-metric--blue::before { background: #3b82f6; }
.pp2h-metric--purple::before { background: #D45A76; }
.pp2h-metric--red:hover { border-color: #ef4444; box-shadow: 0 6px 20px rgba(239,68,68,.12); }
.pp2h-metric--amber:hover { border-color: #f59e0b; box-shadow: 0 6px 20px rgba(245,158,11,.12); }
.pp2h-metric--green:hover { border-color: #10b981; box-shadow: 0 6px 20px rgba(16,185,129,.12); }
.pp2h-metric--blue:hover { border-color: #3b82f6; box-shadow: 0 6px 20px rgba(59,130,246,.12); }
.pp2h-metric--purple:hover { border-color: #D45A76; box-shadow: 0 6px 20px rgba(164,16,52,.12); }
.pp2h-metric--red .pp2h-metric__icon { background: rgba(239,68,68,.08); color: #dc2626; }
.pp2h-metric--amber .pp2h-metric__icon { background: rgba(245,158,11,.10); color: #b45309; }
.pp2h-metric--green .pp2h-metric__icon { background: rgba(16,185,129,.10); color: #047857; }
.pp2h-metric--blue .pp2h-metric__icon { background: rgba(59,130,246,.10); color: #1d4ed8; }
.pp2h-metric--purple .pp2h-metric__icon { background: rgba(164,16,52,.10); color: #7A0D27; }
@media (max-width: 900px) {
.pp2h-metrics__inner { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.pp2h-metrics { padding: var(--sp-3) 16px 0; }
.pp2h-metrics__inner { grid-template-columns: repeat(2, 1fr); }
.pp2h-metric { padding: 14px; gap: 10px; }
}
/* ════════════════════════════════════════════════════════════
TRUST STRIP — slim inline chips (other pp2- legal pages)
════════════════════════════════════════════════════════════ */
.pp2-trust-strip {
max-width: var(--maxw);
margin: 0 auto;
padding: var(--sp-3) var(--gutter);
}
.pp2-trust-strip__inner {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-2);
}
.pp2-trust-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 600;
color: var(--text-2);
padding: 5px 10px;
white-space: nowrap;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
}
.pp2-trust-item__icon { color: var(--cr); flex-shrink: 0; width: 12px; height: 12px; }
.pp2-trust-item__sep { display: none; }
/* ════════════════════════════════════════════════════════════
TWO-COLUMN LAYOUT
════════════════════════════════════════════════════════════ */
.pp2-layout {
max-width: var(--maxw);
margin: 0 auto;
padding: var(--sp-4) var(--gutter) var(--sp-6);
display: grid;
grid-template-columns: 288px 1fr;
gap: var(--sp-6);
align-items: start;
position: relative;
}
.pp2-toc {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-3);
display: flex;
flex-direction: column;
/* Shrinks to fit its content (heading + links + CTA), capped so it
never extends past the visible viewport. No explicit height — a
short TOC (5 links) stays a compact, naturally-sized card instead
of being stretched to fill the whole window with dead or
artificially-tall rows; a long TOC (14 links) naturally ends up
close to full height on its own. */
max-height: calc(100vh - var(--header-h, 80px) - 12px - 16px);
}
.pp2-toc--pinned { position: fixed; }
.pp2-toc--bottomed { position: absolute; }
.pp2-toc-placeholder { display: none; }
.pp2-toc__toggle { display: none; }
.pp2-toc__nav {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.pp2-toc__heading {
flex: 0 0 auto;
font-size: 13px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #000;
margin: 0 0 var(--sp-2);
padding: 0 var(--sp-2) var(--sp-2);
border-bottom: 1px solid var(--border);
}
.pp2-toc__list-wrap {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
/* Stop the inner nav-list scroll from chaining into the page scroll
once it hits its own top/bottom — without this, scrolling the TOC
list past its end also drags the right-hand content section along
with it. */
overscroll-behavior: contain;
}
.pp2-toc__list {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.pp2-toc__link {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--radius-sm);
font-size: 17px;
font-weight: 400;
color: var(--text-2);
text-decoration: none;
line-height: 1.5;
transition: color .14s, background .14s;
}
.pp2-toc__link:hover {
color: var(--ink);
background: var(--bg-soft);
}
.pp2-toc__link.pp2-toc__link--active {
color: var(--cr);
background: var(--cr-xs);
font-weight: 600;
}
.pp2-toc__num {
font-size: 10.5px;
font-weight: 700;
color: var(--border-md);
min-width: 18px;
flex-shrink: 0;
transition: color .14s;
font-variant-numeric: tabular-nums;
}
.pp2-toc__link.pp2-toc__link--active .pp2-toc__num { color: var(--cr); }
.pp2-toc__cta {
flex: 0 0 auto;
margin-top: var(--sp-2);
padding: var(--sp-3);
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.pp2-toc__cta p {
font-size: 13px;
color: var(--text-3);
margin: 0 0 3px;
}
.pp2-toc__cta a {
font-size: 13.5px;
font-weight: 700;
color: var(--cr);
text-decoration: none;
}
.pp2-toc__cta a:hover { text-decoration: underline; }
/* ════════════════════════════════════════════════════════════
TOC EXTRA — optional plain static sidebar card (e.g. "Related
reading" on shorter pages) placed below .pp2-toc in the grid's left
column. Deliberately NOT sticky/pinned — it scrolls with the page
like normal content, filling what would otherwise be dead space next
to the taller content column on short-TOC pages, and moving out of
view naturally once the user scrolls past it instead of lingering
near the footer.
════════════════════════════════════════════════════════════ */
.pp2-toc-col {
display: flex;
flex-direction: column;
min-width: 0;
}
.pp2-toc-extra {
margin-top: var(--sp-4);
padding: var(--sp-3);
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.pp2-toc-extra__label {
font-size: 12px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #000;
margin: 0 0 var(--sp-2);
padding: 0 var(--sp-2) var(--sp-2);
border-bottom: 1px solid var(--border);
}
.pp2-toc-extra__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.pp2-toc-extra__list a {
display: block;
padding: 8px 10px;
border-radius: var(--radius-sm);
font-size: 15px;
font-weight: 400;
color: var(--text-2);
text-decoration: none;
line-height: 1.5;
transition: color .14s, background .14s;
}
.pp2-toc-extra__list a:hover {
color: var(--ink);
background: var(--bg-soft);
}
@media (max-width: 900px) {
.pp2-toc-extra { display: none; }
}
/* ════════════════════════════════════════════════════════════
CONTENT AREA — one section visible at a time (tab-style)
════════════════════════════════════════════════════════════ */
.pp2-content {
min-width: 0;
max-width: 100%;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--sp-5) var(--sp-6);
}
.pp2-section {
display: none;
padding-bottom: var(--sp-5);
margin-bottom: var(--sp-5);
border-bottom: 1px solid var(--border);
scroll-margin-top: calc(var(--header-h, 80px) + var(--sp-4));
}
.pp2-section.pp2-section--active { display: block; }
.pp2-section--last,
.pp2-section:last-child,
.pp2-section.pp2-section--active { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
/* Section heading cluster */
.pp2-sec-head {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-bottom: var(--sp-2);
}
.pp2-sec-num {
font-size: 11px;
font-weight: 700;
color: var(--cr);
background: var(--cr-xs);
border: 1px solid var(--cr-md);
border-radius: 6px;
width: 26px; height: 26px;
flex-shrink: 0;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
font-variant-numeric: tabular-nums;
}
.pp2-sec-h2 {
font-size: clamp(18px, 2vw, 21px) !important;
font-weight: 700 !important;
letter-spacing: -0.015em !important;
line-height: 1.25 !important;
color: var(--ink) !important;
margin: 0 !important;
display: flex;
align-items: center;
gap: var(--sp-2);
flex-wrap: wrap;
}
/* Anchor copy-link */
.pp2-anchor {
font-size: 15px;
font-weight: 400;
color: var(--border-md) !important;
text-decoration: none !important;
opacity: 0;
transition: opacity .14s, color .14s;
margin-left: 2px;
flex-shrink: 0;
}
.pp2-sec-head:hover .pp2-anchor,
.pp2-sec-h2:hover .pp2-anchor { opacity: 1; }
.pp2-anchor:hover { color: var(--cr) !important; }
/* Section intro */
.pp2-sec-intro {
font-size: 15px;
line-height: 1.65;
color: var(--text-2);
margin: 0 0 var(--sp-4);
}
/* Body paragraph */
.pp2-body-p {
font-size: 14.5px;
line-height: 1.68;
color: var(--text-2);
margin: 0 0 var(--sp-4);
}
.pp2-body-p strong { color: var(--text); font-weight: 600; }
/* Inline link */
.pp2-inline-link {
color: #A41034 !important;
font-weight: 500;
text-decoration: underline;
text-decoration-color: rgba(164,16,52,.3);
text-underline-offset: 2px;
transition: text-decoration-color .14s;
}
.pp2-inline-link:hover { text-decoration-color: var(--cr); }
.pp2-sub-block a[style],
.pp2-deflist__desc a[style],
.pp2-body-p a[style] { color: var(--cr) !important; font-weight: 600 !important; }
/* Floating sub-heading (used mid-section, e.g. MSA §03) */
.pp2-float-h3 {
font-size: 14.5px !important;
font-weight: 700 !important;
color: var(--ink) !important;
letter-spacing: -0.01em;
margin: var(--sp-4) 0 var(--sp-2) !important;
}
/* ════════════════════════════════════════════════════════════
DEFINITION LIST (card-bordered table)
════════════════════════════════════════════════════════════ */
.pp2-deflist {
list-style: none;
margin: 0 0 var(--sp-4);
padding: 0;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.pp2-deflist__item {
display: grid;
grid-template-columns: 172px 1fr;
gap: 0 var(--sp-4);
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--border);
align-items: baseline;
transition: background .12s;
}
.pp2-deflist__item:last-child { border-bottom: none; }
.pp2-deflist__item:nth-child(even) { background: var(--bg-soft); }
.pp2-deflist__item:hover { background: var(--cr-xs); }
.pp2-deflist__term {
font-size: 15px;
font-weight: 600;
color: var(--cr);
letter-spacing: -0.005em;
line-height: 1.45;
}
.pp2-deflist__desc {
font-size: 15px;
line-height: 1.6;
color: var(--text-2);
margin: 0;
}
.pp2-deflist__desc strong { color: var(--text); font-weight: 600; }
/* ════════════════════════════════════════════════════════════
CALLOUTS
════════════════════════════════════════════════════════════ */
.pp2-callout {
margin: var(--sp-3) 0 var(--sp-4);
padding: var(--sp-3) var(--sp-4);
border-radius: var(--radius-sm);
display: flex;
width: 100%; /* belt-and-suspenders: ensures full-width even in odd grid contexts */
gap: var(--sp-3);
align-items: flex-start;
box-sizing: border-box;
}
.pp2-callout p {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--text);
}
.pp2-callout strong { font-weight: 600; }
.pp2-callout a { font-weight: 500; text-decoration: none; }
.pp2-callout a:hover { text-decoration: underline; }
.pp2-callout__icon {
flex-shrink: 0;
width: 26px; height: 26px;
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
}
.pp2-callout__icon svg { width: 14px; height: 14px; }
.pp2-callout--affirm { background: #f0fdf4; border: 1px solid #bbf7d0; }
.pp2-callout--affirm .pp2-callout__icon { background: #16a34a; color: #fff; }
.pp2-callout--affirm a { color: #15803d; }
.pp2-callout--info {
background: var(--bg-soft);
border: 1px solid var(--border);
border-left: 3px solid var(--cr);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.pp2-callout--info .pp2-callout__icon { background: var(--cr-sm); color: var(--cr); }
.pp2-callout--info a { color: var(--cr); }
.pp2-callout p a[style] { color: var(--cr) !important; }
.pp2-callout--warn {
background: #FFF8F8;
border: 1px solid rgba(164,16,52,.16);
border-left: 3px solid var(--cr);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.pp2-callout--warn .pp2-callout__icon { background: var(--cr-sm); color: var(--cr); }
.pp2-callout--vuln { background: #fffbeb; border: 1px solid #fde68a; }
.pp2-callout--vuln .pp2-callout__icon { background: #f59e0b; color: #fff; }
.pp2-callout--vuln a { color: #92400e; font-weight: 600; }
/* ════════════════════════════════════════════════════════════
SUB-BLOCK CARDS (used by §Rights-style lists)
════════════════════════════════════════════════════════════ */
.pp2-sub-block {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: var(--sp-3) var(--sp-4);
margin: 0 0 var(--sp-2);
background: var(--bg);
}
.pp2-sub-block h3,
.pp2-sub-block h4 {
font-size: 14.5px !important;
font-weight: 700 !important;
color: var(--ink) !important;
margin: 0 0 4px !important;
}
.pp2-sub-block > p {
font-size: 14px;
line-height: 1.6;
color: var(--text-2);
margin: 0;
}
.pp2-sub-block ol,
.pp2-sub-block ul { padding-left: 18px; margin: 6px 0 0; }
.pp2-sub-block li {
font-size: 14px;
line-height: 1.6;
color: var(--text-2);
margin-bottom: 4px;
}
/* ════════════════════════════════════════════════════════════
RIGHTS / FEATURE GRID (compact card grid)
════════════════════════════════════════════════════════════ */
.pp2-rights-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-3);
margin: 0 0 var(--sp-4);
}
.pp2-right-card {
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: calc(var(--sp-3) + 2px) var(--sp-3) var(--sp-3);
background: var(--bg);
position: relative;
transition: border-color .15s, box-shadow .15s;
}
.pp2-right-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 3px;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
background: var(--cr);
}
.pp2-right-card:hover {
border-color: var(--cr-md);
box-shadow: var(--shadow-sm);
}
.pp2-right-card__icon {
width: 30px; height: 30px;
border-radius: 7px;
background: var(--cr-xs);
border: 1px solid var(--cr-sm);
display: flex; align-items: center; justify-content: center;
color: var(--cr);
margin-bottom: var(--sp-2);
}
.pp2-right-card__icon svg { width: 15px; height: 15px; }
/* Balanced 3-over-2 layout for a 5-card row (e.g. the Warranties list),
instead of a lonely 5th card stranded under a full row of 4. */
.pp2-rights-grid--five {
grid-template-columns: repeat(6, 1fr);
}
.pp2-rights-grid--five .pp2-right-card:nth-child(1) { grid-column: 1 / 3; }
.pp2-rights-grid--five .pp2-right-card:nth-child(2) { grid-column: 3 / 5; }
.pp2-rights-grid--five .pp2-right-card:nth-child(3) { grid-column: 5 / 7; }
.pp2-rights-grid--five .pp2-right-card:nth-child(4) { grid-column: 2 / 4; }
.pp2-rights-grid--five .pp2-right-card:nth-child(5) { grid-column: 4 / 6; }
/* Category accents — same red/amber/green/blue rhythm used on the
Community Guidelines page's card grids; cycles across the 8 rights. */
.pp2-right-card--red::before { background: #ef4444; }
.pp2-right-card--amber::before { background: #f59e0b; }
.pp2-right-card--green::before { background: #10b981; }
.pp2-right-card--blue::before { background: #3b82f6; }
.pp2-right-card--red:hover { border-color: #ef4444; }
.pp2-right-card--amber:hover { border-color: #f59e0b; }
.pp2-right-card--green:hover { border-color: #10b981; }
.pp2-right-card--blue:hover { border-color: #3b82f6; }
.pp2-right-card--red .pp2-right-card__icon { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.18); color: #dc2626; }
.pp2-right-card--amber .pp2-right-card__icon { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.22); color: #b45309; }
.pp2-right-card--green .pp2-right-card__icon { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.22); color: #047857; }
.pp2-right-card--blue .pp2-right-card__icon { background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.22); color: #1d4ed8; }
.pp2-right-card__title {
font-size: 13.5px !important;
font-weight: 700 !important;
color: var(--ink) !important;
margin: 0 0 4px !important;
letter-spacing: -0.005em;
}
.pp2-right-card__text {
font-size: 13px;
line-height: 1.55;
color: var(--text-2);
margin: 0;
}
/* ════════════════════════════════════════════════════════════
PRICING / TIER GRID (used by T&C)
════════════════════════════════════════════════════════════ */
.pp2-pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: var(--sp-3);
margin: var(--sp-3) 0 var(--sp-4);
}
.pp2-pricing-card {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: var(--sp-3);
background: var(--bg);
transition: box-shadow .15s, transform .15s;
}
.pp2-pricing-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.pp2-pricing-card__label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10.5px;
font-weight: 700;
color: var(--cr);
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 4px;
}
.pp2-pricing-card__label::before {
content: '';
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--cr);
flex-shrink: 0;
}
.pp2-pricing-card p {
font-size: 12px;
color: var(--text-2);
margin: 0 0 var(--sp-2);
line-height: 1.5;
}
.pp2-pricing-card__price {
font-size: 24px;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.02em;
line-height: 1;
}
.pp2-pricing-card__price span {
font-size: 12px;
font-weight: 500;
color: var(--text-3);
letter-spacing: 0;
}
/* ════════════════════════════════════════════════════════════
NUMBERED CLAUSE LIST (used by MSA)
════════════════════════════════════════════════════════════ */
.pp2-clause-list {
margin: 0 0 var(--sp-4);
padding: 0;
counter-reset: pp2-clause;
list-style: none;
}
.pp2-clause-list li {
position: relative;
padding-left: 30px;
font-size: 13.5px;
line-height: 1.6;
color: var(--text-2);
margin-bottom: var(--sp-2);
counter-increment: pp2-clause;
}
.pp2-clause-list li::before {
content: counter(pp2-clause);
position: absolute;
left: 0; top: 1px;
width: 20px; height: 20px;
border-radius: 6px;
background: var(--cr-xs);
border: 1px solid var(--cr-md);
color: var(--cr);
font-size: 10.5px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.pp2-clause-list li strong { color: var(--ink); font-weight: 600; }
.pp2-clause-list li:last-child { margin-bottom: 0; }
/* ════════════════════════════════════════════════════════════
SHIELD CARD (compliance / compact highlighted panel)
════════════════════════════════════════════════════════════ */
.pp2-shield-card {
margin: 0 0 var(--sp-4);
padding: var(--sp-4);
border-radius: var(--radius);
background: var(--bg-soft);
border: 1px solid var(--border);
border-left: 3px solid var(--cr);
display: flex;
gap: var(--sp-3);
align-items: flex-start;
color: var(--ink);
}
.pp2-shield-card::before,
.pp2-shield-card::after { display: none !important; }
.pp2-shield-card__icon {
flex-shrink: 0;
width: 38px; height: 38px;
border-radius: 10px;
background: var(--cr-sm);
border: 1px solid var(--cr-md);
color: var(--cr);
display: flex; align-items: center; justify-content: center;
}
.pp2-shield-card__body { min-width: 0; }
.pp2-shield-card__title {
font-size: 14px !important;
font-weight: 700 !important;
color: var(--ink) !important;
margin: 0 0 4px !important;
}
.pp2-shield-card__text {
font-size: 13px;
line-height: 1.6;
color: var(--text-2);
margin: 0 0 var(--sp-2);
}
.pp2-shield-card__text strong { color: var(--ink); font-weight: 600; }
.pp2-shield-card__badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.pp2-tech-badge {
display: inline-flex;
align-items: center;
padding: 3px 9px;
background: var(--bg);
border: 1px solid var(--border);
color: var(--text-2);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .02em;
border-radius: 5px;
font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
}
/* ════════════════════════════════════════════════════════════
CONTACT — 4 small cards in a single row (was 3 stacked rows
+ a separate full-width CTA banner underneath).
════════════════════════════════════════════════════════════ */
.pp2-contact-grid {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
}
.pp2-contact-grid .pp2-contact-card { flex: 1 1 180px; }
@media (max-width: 520px) { .pp2-contact-grid .pp2-contact-card { flex-basis: 100%; } }
.pp2-contact-grid-note {
flex-basis: 100%;
font-size: 11.5px;
color: var(--text-3);
line-height: 1.5;
margin: 2px 0 0;
}
.pp2-contact-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: var(--sp-3);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg);
text-decoration: none;
transition: background .14s, border-color .14s, transform .14s;
}
.pp2-contact-card:hover {
background: var(--bg-soft);
border-color: var(--cr-sm);
transform: translateY(-2px);
text-decoration: none;
}
.pp2-contact-card__icon {
width: 28px; height: 28px;
border-radius: 8px;
background: var(--cr-xs);
border: 1px solid var(--cr-sm);
display: flex; align-items: center; justify-content: center;
color: var(--cr);
flex-shrink: 0;
}
.pp2-contact-card__label {
font-size: 11px;
font-weight: 500;
color: var(--text-3);
}
.pp2-contact-card__link {
font-size: 13.5px;
font-weight: 600;
color: var(--cr);
line-height: 1.3;
}
.pp2-contact-card:hover .pp2-contact-card__link { text-decoration: underline; }
/* Fourth card — the CTA — reads as a solid, standout tile */
.pp2-contact-card--cta {
background: var(--ink);
border-color: var(--ink);
}
.pp2-contact-card--cta:hover { background: var(--cr); border-color: var(--cr); }
.pp2-contact-card--cta .pp2-contact-card__label { color: rgba(255,255,255,.6); }
.pp2-contact-card--cta .pp2-contact-card__link { color: #fff; }
.pp2-contact-card__icon--cta {
background: rgba(255,255,255,.14);
border-color: rgba(255,255,255,.2);
color: #fff;
}
/* ════════════════════════════════════════════════════════════
CLOSING CTA — plain full-bleed band on the shared cream
background, no card/shadow (same treatment as Community
Guidelines' .cgp-cta-footer). Sits outside .pp2-wrap so the
background spans edge-to-edge — hardcoded colors, not var(),
since .pp2-wrap's custom properties don't cascade to a sibling.
════════════════════════════════════════════════════════════ */
.pp2-cta-footer {
background: #F5F1EA;
padding: 40px 24px;
text-align: center;
}
.pp2-cta-footer__inner {
max-width: 560px;
margin: 0 auto;
}
.pp2-cta-footer__inner h2 {
font-family: 'Fraunces', Georgia, serif;
font-size: 1.5rem !important;
font-weight: 700;
color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
margin: 0 0 8px;
line-height: 1.25;
letter-spacing: -0.01em;
}
.pp2-cta-footer__inner h2 span {
color: #A41034 !important;
-webkit-text-fill-color: #A41034 !important;
}
.pp2-cta-footer__inner p {
font-size: 0.875rem;
color: #4B5563;
margin: 0 0 18px;
line-height: 1.6;
}
.pp2-cta-footer__btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #A41034;
color: #fff;
font-size: .85rem;
font-weight: 600;
padding: 10px 24px;
border-radius: 10px;
border: 2px solid #A41034;
text-decoration: none;
box-shadow: 0 4px 14px rgba(164,16,52,.30);
transition: background .18s, border-color .18s, transform .12s, box-shadow .18s;
}
.pp2-cta-footer__btn:hover {
background: #8B0E2C;
border-color: #8B0E2C;
color: #fff;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(164,16,52,.38);
}
.pp2-cta-footer__btn svg { flex-shrink: 0; width: 14px; height: 14px; transition: transform .18s; }
.pp2-cta-footer__btn:hover svg { transform: translateX(2px); }
/* ════════════════════════════════════════════════════════════
LEGAL FOOTER BAR (used by API License etc.)
════════════════════════════════════════════════════════════ */
.pp2-footer-bar {
margin-top: var(--sp-6);
padding: var(--sp-4) 0 0;
border-top: 1px solid var(--border);
}
.pp2-footer-bar__inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--sp-2);
}
.pp2-footer-bar__label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-3);
margin-right: 8px;
}
.pp2-footer-bar__links { font-size: 12px; color: var(--text-2); }
.pp2-footer-bar__links a { color: var(--cr); font-weight: 500; text-decoration: none; }
.pp2-footer-bar__links a:hover { text-decoration: underline; }
.pp2-footer-bar__links span { color: var(--border-md); margin: 0 6px; }
.pp2-footer-bar__links a[aria-current="page"] { color: var(--text-2); font-weight: 600; pointer-events: none; }
.pp2-footer-bar__right { font-size: 12px; color: var(--text-3); }
/* ════════════════════════════════════════════════════════════
SOFT CONTACT FOOTER (cookie-policy / refund-policy CTA band)
════════════════════════════════════════════════════════════ */
.ig-rf-contact-footer,
.ig-ck-contact-footer {
background: var(--bg-cream) !important;
padding: var(--sp-6) var(--gutter) !important;
text-align: center !important;
}
.ig-rf-contact-footer h2,
.ig-rf-contact-footer__inner h2,
.ig-ck-contact-footer h2,
.ig-ck-contact-footer__inner h2 {
font-size: 22px !important;
font-weight: 700 !important;
color: var(--ink) !important;
margin: 0 0 8px !important;
line-height: 1.25 !important;
letter-spacing: -0.01em !important;
}
.ig-rf-contact-footer p,
.ig-rf-contact-footer__inner p,
.ig-ck-contact-footer p,
.ig-ck-contact-footer__inner p {
font-size: 13.5px !important;
color: var(--text-2) !important;
margin: 0 0 var(--sp-4) !important;
line-height: 1.6 !important;
}
.ig-rf-contact-btn {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: transparent !important;
color: var(--cr) !important;
font-size: 13px !important;
font-weight: 700 !important;
padding: 10px 22px !important;
border-radius: 50px !important;
text-decoration: none !important;
border: 1.5px solid var(--cr) !important;
transition: background .18s, color .18s !important;
}
.ig-rf-contact-btn:hover {
background: var(--cr) !important;
color: #fff !important;
text-decoration: none !important;
}
/* ════════════════════════════════════════════════════════════
BACK TO TOP
════════════════════════════════════════════════════════════ */
#pp-totop {
position: fixed;
bottom: 24px;
right: 24px;
width: 38px;
height: 38px;
background: var(--ink);
color: #fff;
border: none;
border-radius: 9px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(8px);
transition: opacity .2s, transform .2s, background .18s;
z-index: 9000;
pointer-events: none;
}
#pp-totop svg { width: 16px; height: 16px; }
#pp-totop.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
#pp-totop:hover { background: var(--cr); }
/* ════════════════════════════════════════════════════════════
FOCUS & ACCESSIBILITY
Plain :focus (e.g. after a mouse click) is reset to none first —
otherwise the browser falls back to its own UA/OS-accent-colored
outline (shows up as a stray amber/blue box instead of the brand
crimson ring). :focus-visible then re-adds the themed ring for
real keyboard navigation.
════════════════════════════════════════════════════════════ */
.pp2-toc__link:focus,
.pp2-cta-btn:focus,
.pp2-anchor:focus,
.pp2-inline-link:focus {
outline: none;
}
.pp2-toc__link:focus-visible,
.pp2-cta-btn:focus-visible,
.pp2-anchor:focus-visible,
.pp2-inline-link:focus-visible {
outline: 2px solid var(--cr);
outline-offset: 2px;
border-radius: 4px;
}
/* ════════════════════════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
.pp2-layout { grid-template-columns: 216px 1fr; gap: var(--sp-6); }
}
@media (max-width: 900px) {
:root { --gutter: 24px; }
.pp2-hero__inner { padding: var(--sp-6) 24px var(--sp-5); }
.pp2-summary-wrap,
.pp2-trust-strip { padding-left: 24px; padding-right: 24px; }
.pp2-layout { grid-template-columns: 1fr; gap: 0; padding: var(--sp-4) 24px var(--sp-6); }
.pp2-content { padding: var(--sp-5); }
.pp2-toc {
position: static; margin-bottom: var(--sp-4);
padding: 0; border: none;
height: auto;
max-height: none;
}
.pp2-toc__list-wrap { overflow-y: visible; max-height: none; }
.pp2-toc__toggle {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
font-family: var(--font);
font-size: 13px;
font-weight: 600;
color: var(--text);
cursor: pointer;
transition: background .14s;
}
.pp2-toc__toggle:hover { background: var(--bg-soft); }
.pp2-toc__toggle-chevron { transition: transform .22s ease; }
.pp2-toc__toggle[aria-expanded="true"] .pp2-toc__toggle-chevron { transform: rotate(180deg); }
.pp2-toc__nav {
display: none;
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 var(--radius) var(--radius);
padding: var(--sp-2) 0 var(--sp-3);
background: var(--bg);
}
.pp2-toc__nav.pp2-toc__nav--open { display: block; }
.pp2-toc__heading { display: none; }
.pp2-summary-card { grid-template-columns: 1fr; gap: var(--sp-2); padding: var(--sp-4); }
.pp2-rights-grid,
.pp2-pricing-grid { grid-template-columns: repeat(2, 1fr); }
.pp2-rights-grid--five { grid-template-columns: repeat(2, 1fr); }
.pp2-rights-grid--five .pp2-right-card:nth-child(n) { grid-column: auto; }
.pp2-rights-grid--five .pp2-right-card:nth-child(5) { grid-column: 1 / 3; max-width: 50%; margin: 0 auto; }
}
@media (max-width: 640px) {
.pp2-hero__inner { padding: var(--sp-5) 16px var(--sp-4); }
.pp2-hero__meta { gap: var(--sp-3) var(--sp-5); }
.pp2-summary-wrap,
.pp2-trust-strip { padding-left: 16px; padding-right: 16px; }
.pp2-layout { padding: var(--sp-4) 16px var(--sp-6); }
.pp2-content { padding: var(--sp-4); }
.pp2-deflist__item { grid-template-columns: 1fr; gap: 3px; padding: var(--sp-2) var(--sp-3); }
.pp2-rights-grid,
.pp2-pricing-grid { grid-template-columns: 1fr; }
.pp2-rights-grid--five .pp2-right-card:nth-child(n) { grid-column: auto; max-width: none; margin: 0; }
.pp2-sub-block,
.pp2-shield-card,
.pp2-contact-row { padding: var(--sp-3); }
}
@media (max-width: 480px) {
.pp2-wrap { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
.pp2-right-card,
.pp2-pricing-card,
.pp2-cta-btn,
.pp2-toc__link,
.pp2-progress-bar__fill,
#pp-totop { transition: none; }
.pp2-toc__toggle-chevron { transition: none; }
}