. styles.css carries
`section:not(.hero){content-visibility:auto;contain-intrinsic-size:820px}`
plus `section{padding:3rem 1rem!important}` for mobile, which
between them reserve an ~820px placeholder and blow out the
padding. Use — that is why every block below is a div.
Type is fluid via clamp() so a phone never gets laptop-sized text.
══════════════════════════════════════════════════════════════════ */
/* ── Squared exercise-book paper, drawn in CSS ── */
body.subpage {
background-color: #f7f9fc;
background-image:
linear-gradient(rgba(0,48,135,.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,48,135,.055) 1px, transparent 1px);
background-size: 26px 26px;
background-attachment: fixed;
}
.subpage-main { padding-top: clamp(.9rem, 3vw, 2rem) !important; }
.pg-wrap { max-width: 940px; margin: 0 auto; }
.pg-wrap--wide { max-width: 1100px; }
/* ── Hero ── */
.pg-hero {
position: relative; overflow: hidden; background: #fff;
border: 1px solid rgba(0,48,135,.12); border-radius: 20px;
padding: clamp(1.15rem, 4vw, 2.1rem);
box-shadow: 0 18px 44px -34px rgba(0,48,135,.55);
margin-bottom: 1.4rem;
}
/* accent rule down the left edge — the "margin line" of the page */
.pg-hero::before {
content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
background: linear-gradient(180deg, #003087, var(--acc, #0ea5e9));
}
.pg-eyebrow {
display: inline-flex; align-items: center; gap: .4rem;
font-size: .63rem; font-weight: 800; letter-spacing: .14em;
text-transform: uppercase; color: #0059d1; background: #e8f2ff;
border-radius: 999px; padding: .3rem .65rem;
}
.pg-hero h1 {
font-family: 'Syne', sans-serif; color: #003087; letter-spacing: -.03em;
font-size: clamp(1.45rem, 4.6vw, 2.4rem); line-height: 1.1;
margin: .6rem 0 .4rem;
}
.pg-hero h1 em { font-style: normal; color: var(--acc, #0ea5e9); }
.pg-lede {
color: #4a6076; font-size: clamp(.86rem, 2.1vw, .98rem);
line-height: 1.55; font-weight: 500; max-width: 52ch; margin: 0;
}
.pg-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.pg-tag {
font-size: .68rem; font-weight: 700; color: #334155; background: #f1f5f9;
border: 1px solid rgba(0,48,135,.09); border-radius: 8px; padding: .28rem .55rem;
}
.pg-tag b { color: #003087; font-variant-numeric: tabular-nums; }
/* ── Section heading with a trailing rule ── */
.pg-h2 {
font-family: 'Syne', sans-serif; color: #003087; letter-spacing: -.02em;
font-size: clamp(.95rem, 2.4vw, 1.15rem); margin: 1.6rem 0 .8rem;
display: flex; align-items: center; gap: .5rem;
}
.pg-h2::after { content: ''; flex: 1; height: 1px; background: rgba(0,48,135,.13); }
/* ── Grids ── */
.pg-grid { display: grid; gap: .75rem; }
.pg-grid--2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pg-grid--3 { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.pg-grid--4 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
/* ── Base card ── */
.pg-card {
position: relative; overflow: hidden; background: #fff;
border: 1px solid rgba(0,48,135,.12); border-radius: 16px;
padding: 1rem 1.05rem;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pg-card--accent { border-left: 4px solid var(--acc, #0ea5e9); }
.pg-card--cap::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, #003087, var(--acc, #0ea5e9));
}
a.pg-card { display: block; text-decoration: none; }
.pg-card:hover {
transform: translateY(-2px); border-color: color-mix(in srgb, var(--acc, #0ea5e9) 45%, #fff);
box-shadow: 0 16px 34px -24px rgba(0,48,135,.5);
}
.pg-card h3 {
font-family: 'Syne', sans-serif; color: #003087; letter-spacing: -.02em;
font-size: clamp(.98rem, 2.3vw, 1.1rem); line-height: 1.25; margin: 0 0 .35rem;
}
.pg-card p { color: #4a6076; font-size: .85rem; line-height: 1.55; margin: 0; }
/* pill label on a card */
.pg-pill {
display: inline-block; font-size: .63rem; font-weight: 800; letter-spacing: .1em;
text-transform: uppercase; border-radius: 999px; padding: .24rem .55rem;
background: #eef2f7; /* fallback: older Android */
background: color-mix(in srgb, var(--acc, #0ea5e9) 13%, #fff);
color: var(--acc, #0059d1);
}
/* icon tile */
.pg-icon {
flex: none; width: 42px; height: 42px; border-radius: 12px;
display: grid; place-items: center; font-size: 1.25rem;
background: #eef2f7; /* fallback: older Android */
background: color-mix(in srgb, var(--acc, #0ea5e9) 12%, #fff);
}
/* big index numeral, e.g. "01" */
.pg-num {
font-family: 'Syne', sans-serif; font-weight: 800; line-height: 1;
letter-spacing: -.04em; font-variant-numeric: tabular-nums;
font-size: clamp(1.5rem, 4.5vw, 1.95rem); color: var(--acc, #0ea5e9);
}
/* feature list with tick marks */
.pg-list { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .3rem; }
.pg-list li {
position: relative; padding-left: 1.15rem;
font-size: .8rem; line-height: 1.5; color: #4a6076; font-weight: 500;
}
.pg-list li::before {
content: ''; position: absolute; left: 0; top: .45em;
width: 6px; height: 6px; border-radius: 50%; background: var(--acc, #0ea5e9);
}
/* ── FAQ accordion (native , no JS) ── */
.pg-faq { display: grid; gap: .5rem; }
.pg-faq details {
background: #fff; border: 1px solid rgba(0,48,135,.12);
border-radius: 12px; overflow: hidden;
}
.pg-faq details[open] { border-color: rgba(14,165,233,.4); }
.pg-faq summary {
cursor: pointer; list-style: none; padding: .85rem 2.4rem .85rem 1rem;
position: relative; font-weight: 700; color: #00306b;
font-size: clamp(.87rem, 2.1vw, .95rem); line-height: 1.4;
}
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after {
content: '+'; position: absolute; right: .95rem; top: 50%;
transform: translateY(-50%); font-size: 1.2rem; font-weight: 700;
color: #0ea5e9; line-height: 1;
}
.pg-faq details[open] summary::after { content: '–'; }
.pg-faq summary:focus-visible { outline: 2px solid #0ea5e9; outline-offset: -2px; }
.pg-faq .pg-answer {
padding: 0 1rem 1rem; font-size: .87rem; line-height: 1.65; color: #4a6076;
border-top: 1px solid rgba(0,48,135,.07); padding-top: .8rem; margin-top: -.1rem;
}
/* ── Person card (toppers / results) ── */
.pg-person { text-align: center; padding: 1rem .8rem; }
.pg-person .pg-ring {
width: 74px; height: 74px; margin: 0 auto .6rem; border-radius: 50%;
padding: 3px; background: linear-gradient(135deg, #003087, var(--acc, #0ea5e9));
}
.pg-person .pg-ring img {
width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
display: block; background: #fff; border: 2px solid #fff;
}
.pg-person .pg-score {
font-family: 'Syne', sans-serif; font-weight: 800; color: #003087;
font-size: clamp(1.15rem, 3.2vw, 1.4rem); line-height: 1;
font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.pg-person .pg-name {
font-weight: 700; color: #00306b; font-size: .87rem;
margin-top: .3rem; line-height: 1.3;
}
.pg-person .pg-school {
color: #90a4ae; font-size: .72rem; line-height: 1.4; margin-top: .2rem;
}
.pg-rankbadge {
display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .08em;
text-transform: uppercase; border-radius: 999px; padding: .22rem .6rem;
margin-bottom: .6rem; color: #fff; background: var(--acc, #0ea5e9);
}
.pg-viewresult {
display: inline-block; margin-top: .6rem; font-size: .74rem; font-weight: 800;
color: #0059d1; text-decoration: none; border-bottom: 1px solid rgba(0,89,209,.3);
}
.pg-viewresult:hover { border-bottom-color: #0059d1; }
/* ── Banner ── */
.pg-banner {
background: #fff; border: 1px solid rgba(0,48,135,.12);
border-left: 4px solid var(--acc, #0ea5e9); border-radius: 12px;
padding: .9rem 1.1rem; margin-top: 1rem;
}
.pg-banner strong { display: block; color: #003087; font-size: .93rem; }
.pg-banner span { color: #4a6076; font-size: .83rem; line-height: 1.5; }
/* ── Closing CTA ── */
.pg-cta {
position: relative; overflow: hidden; margin-top: 1.8rem; border-radius: 18px;
background: linear-gradient(135deg, #00204f, #0b6fb8); color: #fff;
padding: clamp(1.2rem, 4vw, 1.9rem); text-align: center;
}
/* keeps the exercise-book motif on the dark panels */
.pg-cta::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 22px 22px;
}
.pg-cta > * { position: relative; z-index: 1; }
.pg-cta h2 {
font-family: 'Syne', sans-serif; color: #fff; letter-spacing: -.02em;
font-size: clamp(1rem, 2.9vw, 1.3rem); margin: 0 0 .45rem; line-height: 1.25;
}
.pg-cta p { opacity: .88; font-size: .85rem; line-height: 1.55; margin: 0 auto .95rem; max-width: 40ch; }
.pg-cta a {
display: inline-block; background: #fff; color: #003087; text-decoration: none;
font-weight: 800; padding: .65rem 1.25rem; border-radius: 999px; font-size: .86rem;
}
/* ── Phones ── */
@media (max-width: 560px) {
.pg-grid--2, .pg-grid--3 { grid-template-columns: 1fr; }
.pg-grid--4 { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.pg-card { padding: .9rem .95rem; }
.pg-person .pg-ring { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
.pg-card { transition: none !important; }
}