/* ==========================================================================
Elite Content Engine, page stylesheet
--------------------------------------------------------------------------
Styles the output of includes/elite-engine/EliteBlockRenderer.php.
Every rule is scoped under .elite-content or an .ec- prefixed class, so this
file cannot alter any existing page. Only pages the new engine produces load
it.
The design decisions behind this file
-------------------------------------
1. One reading column. A generated article was previously laid out as two
columns of prose on a wide screen, which forces the eye back and forth and
reads as unprofessional. Prose is capped at a comfortable measure instead.
Only elements that genuinely earn width, such as a table or a card grid,
break out of that column.
2. Rhythm through material, not stripes. A long article that alternates
background colour every section looks like a template. This page builds
rhythm from four materials the reader learns to recognise: plain prose,
a tinted panel, a raised card, and a full width dark band. Each one means
something. Plain prose is the argument, a panel is a supporting aside, a
card is a comparable unit, and a dark band is a decision point.
3. Mobile first. The base rules describe a phone. Wider screens add to them
rather than correcting them.
4. Colour never carries meaning alone. Every toned element also names its
meaning in text and shows a Bootstrap Icon, so a colour blind reader loses
nothing.
5. Contrast is checked, not guessed. Body text is #111212 on white, which is
about 17 to 1. The teal #003737 on white is about 13 to 1. White on teal
is the same ratio inverted. Every combination here clears the AA
requirement of 4.5 to 1 for body text and most clear AAA.
6. Motion is short and purposeful, and it stops entirely when the reader has
asked for reduced motion. Nothing animates on load, so nothing competes
with reading and nothing delays the largest contentful paint.
Brand constraints: the palette is teal. Purple is never used. Icons are
Bootstrap Icons. No emoji. No em dash or en dash.
========================================================================== */
/* --------------------------------------------------------------------------
1. Tokens
-------------------------------------------------------------------------- */
.elite-content {
/* Ink. Two weights only, so emphasis stays meaningful. */
--ec-ink: #111212;
--ec-ink-soft: #181b1b;
/* Brand. Inherited from assets/styles.css so a brand change flows through. */
--ec-teal: var(--elite-teal, #003737);
--ec-teal-deep: #002424;
--ec-teal-mid: var(--elite-teal-dark, #004545);
--ec-teal-wash: var(--elite-green-light, #dcffff);
--ec-teal-wash-soft: #d4ffff;
/* Surfaces. */
--ec-surface: #ffffff;
--ec-surface-soft: #f5f9f9;
--ec-line: #1c2222;
--ec-line-soft: #e8efef;
/* Semantic. Each one is dark enough to sit on white as text. */
--ec-warning: #7a4e00;
--ec-warning-wash: #fff8ea;
--ec-warning-line: #f0d9ab;
/* The site already defines this crimson as its danger colour in
assets/styles.css. Reusing that exact value keeps one meaning attached to
one colour across the whole site, rather than introducing a near miss. */
--ec-risk: var(--audit-danger, #9f1853);
--ec-risk-wash: #fdf2f6;
--ec-risk-line: #f2cddc;
--ec-success: #1e6609;
--ec-success-wash: #f2f9ee;
--ec-success-line: #cbe4bd;
/* Space. One scale on a 4 pixel base, so vertical rhythm stays predictable
and no padding value is ever arbitrary. */
--ec-1: 0.25rem;
--ec-2: 0.5rem;
--ec-3: 0.75rem;
--ec-4: 0.1rem;
--ec-5: 1.5rem;
--ec-6: 0.5rem;
--ec-7: 3rem;
--ec-8: 4rem;
/* Width model. Two numbers do all the work.
The container is the outer limit for everything on the page. A section
background runs edge to edge, but the content inside it stops here, so a
wide monitor gets breathing room instead of a stretched line of text.
The measure is the reading width. Prose stops here however wide the
container gets, because a line longer than roughly 75 characters is hard
for the eye to track back to the start of. */
--ec-container: 1290px;
--ec-measure: 68ch;
/* Edge padding. Grows with the viewport, so a phone gets a comfortable
margin and a desktop gets a generous one, without a breakpoint. */
--ec-pad: clamp(1.25rem, 4vw, 2.5rem);
--ec-radius-sm: 0.5rem;
--ec-radius: 0.875rem;
--ec-radius-lg: 1.25rem;
/* Elevation. Two layered shadows each: a tight one for the edge, a wide
soft one for the lift. A single flat shadow always looks pasted on. */
--ec-lift-1: 0 1px 2px rgba(0, 40, 40, 0.05), 0 2px 8px rgba(0, 40, 40, 0.04);
--ec-lift-2: 0 1px 2px rgba(0, 40, 40, 0.06), 0 8px 24px rgba(0, 40, 40, 0.07);
--ec-lift-3: 0 2px 4px rgba(0, 40, 40, 0.07), 0 16px 40px rgba(0, 40, 40, 0.10);
/* Motion. Fast enough to feel immediate, eased so it never feels mechanical. */
--ec-ease: cubic-bezier(0.2, 0, 0, 1);
--ec-fast: 140ms;
--ec-normal: 240ms;
color: var(--ec-ink);
font-size: 1.0625rem;
line-height: 1.75;
/* Kerning and ligatures on, so headings set tightly without looking cramped. */
font-kerning: normal;
font-variant-ligatures: common-ligatures;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
/* Five tracks. The outer pair are the page gutters, the wide pair carry
anything that earns extra room, and the centre track is the reading
measure. The wide tracks plus the measure add up to the container, so
nothing on the page can ever exceed it.
A child sits in the centre track unless it asks for more, which means the
common case needs no rule at all. On a phone the side tracks collapse to
zero and every arrangement becomes one column, so nothing has to be
undone at a breakpoint. */
display: grid;
grid-template-columns:
[full-start] minmax(var(--ec-pad), 1fr)
[wide-start] minmax(0, calc((var(--ec-container) - var(--ec-measure)) / 2))
[text-start] minmax(0, var(--ec-measure)) [text-end]
minmax(0, calc((var(--ec-container) - var(--ec-measure)) / 2)) [wide-end]
minmax(var(--ec-pad), 1fr) [full-end];
}
.elite-content > * {
grid-column: text;
margin-block: 0 var(--ec-5);
min-width: 0;
}
.elite-content > *:last-child { margin-block-end: 0; }
/* Elements that earn extra width. */
.elite-content > .ec-compare,
.elite-content > .ec-metrics,
.elite-content > .ec-pricing,
.elite-content > .ec-proscons,
.elite-content > .ec-timeline,
.elite-content > .ec-decision { grid-column: wide; }
/* The conversion band is the only element whose background runs edge to edge,
so it reads as a deliberate stop in the page rather than one more card. */
.elite-content > .ec-cta { grid-column: full; margin-block: var(--ec-7) var(--ec-6); }
@media (min-width: 48rem) {
.elite-content { font-size: 1.125rem; }
.elite-content > * { margin-block-end: var(--ec-6); }
}
/* Text selection in brand colour. A small detail, but an unstyled blue
selection on a teal page is the kind of thing that reads as unfinished. */
.elite-content ::selection { background: var(--ec-teal-wash); color: var(--ec-teal-deep); }
/* --------------------------------------------------------------------------
2. Typography
-------------------------------------------------------------------------- */
.elite-content .ec-heading {
color: var(--ec-teal);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.018em;
/* More space above than below, so a heading visually belongs to the text it
introduces instead of floating between two blocks. */
margin-block: var(--ec-8) var(--ec-3);
/* Stops a heading leaving one orphaned word on the last line. */
text-wrap: balance;
scroll-margin-top: 6rem;
}
.elite-content > *:first-child.ec-heading { margin-block-start: 0; }
/* A short teal rule above every section heading. It gives the page a repeating
visual beat and makes the section boundary obvious while skimming.
The type scale below is deliberate rather than arbitrary. Each level is a
clear step away from the one under it, so a reader can tell a section title
from a subheading at a glance without reading either of them:
eyebrow 12px uppercase, wide tracking
h2 28px to 40px
lede 17px to 20px
h3 21px to 26px
h4 19px
body 17px to 18px
meta 13px to 15px */
.elite-content .ec-heading--h2 {
font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);
line-height: 1.15;
letter-spacing: -0.025em;
padding-block-start: var(--ec-4);
position: relative;
}
.elite-content .ec-heading--h2::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 2.5rem;
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg, var(--ec-teal), var(--ec-teal-mid));
}
.elite-content .ec-heading--h3 {
font-size: clamp(1.3125rem, 1.15rem + 0.8vw, 1.625rem);
line-height: 1.25;
letter-spacing: -0.018em;
margin-block-start: var(--ec-6);
}
.elite-content .ec-heading--h4 {
font-size: 1.1875rem;
line-height: 1.35;
letter-spacing: -0.01em;
margin-block-start: var(--ec-5);
color: var(--ec-ink);
}
.elite-content .ec-prose > * { margin-block: 0 var(--ec-4); }
.elite-content .ec-prose > *:last-child { margin-block-end: 0; }
/* Avoids a single short word on the final line of a paragraph. */
.elite-content .ec-prose p { text-wrap: pretty; margin-top:15px; }
.elite-content .ec-prose ul,
.elite-content .ec-prose ol { padding-inline-start: 1.5rem; }
.elite-content .ec-prose li { margin-block-end: var(--ec-2); }
.elite-content .ec-prose li::marker { color: var(--ec-teal); }
.elite-content .ec-prose strong { color: var(--ec-teal); font-weight: 650; }
.elite-content .ec-prose code {
background: var(--ec-surface-soft);
border: 1px solid var(--ec-line-soft);
border-radius: var(--ec-1);
padding: 0.12em 0.4em;
font-size: 0.9em;
}
/* The first paragraph after a section heading is set slightly larger. It reads
as an opening line and gives each section a clear entry point. */
.elite-content .ec-heading--h2 + .ec-prose > p:first-child {
font-size: 1.0625em;
color: var(--ec-ink);
}
/* Links. The underline grows on hover rather than appearing or disappearing,
so the target never shifts and the change is felt as weight, not motion. */
.elite-content a {
color: var(--ec-teal);
text-decoration: underline;
text-decoration-color: rgba(0, 55, 55, 0.35);
text-underline-offset: 0.18em;
text-decoration-thickness: 0.075em;
transition: text-decoration-color var(--ec-fast) var(--ec-ease),
text-decoration-thickness var(--ec-fast) var(--ec-ease);
}
.elite-content a:hover { text-decoration-color: currentColor; text-decoration-thickness: 0.14em; }
.elite-content a:active { color: var(--ec-teal-mid); }
/* A visible focus ring is the only way a keyboard user knows where they are, so
it is never removed, never colour alone, and always has a white halo so it
stays visible on both light and dark surfaces. */
.elite-content :focus-visible {
outline: 3px solid var(--ec-teal);
outline-offset: 2px;
border-radius: var(--ec-1);
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9);
}
.elite-content .ec-icon { color: var(--ec-teal); margin-inline-end: var(--ec-2); flex-shrink: 0; }
/* --------------------------------------------------------------------------
3. Direct answer. The passage an answer engine quotes, so it is treated as
the most important block on the page.
-------------------------------------------------------------------------- */
.elite-content .ec-answer {
position: relative;
background: linear-gradient(160deg, var(--ec-teal-wash) 0%, var(--ec-teal-wash-soft) 100%);
border: 1px solid rgba(0, 55, 55, 0.14);
border-radius: var(--ec-radius-lg);
padding: var(--ec-5);
box-shadow: var(--ec-lift-1);
overflow: hidden;
}
/* A solid teal spine down the leading edge. */
.elite-content .ec-answer::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: 5px;
background: linear-gradient(180deg, var(--ec-teal), var(--ec-teal-mid));
}
.elite-content .ec-answer__tag {
display: inline-flex;
align-items: center;
margin: 0 0 var(--ec-2);
padding: 0.2rem 0.7rem 0.2rem 0.55rem;
border-radius: 999px;
background: var(--ec-teal);
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.elite-content .ec-answer__tag .ec-icon { color: #ffffff; margin-inline-end: var(--ec-1); font-size: 0.875rem; }
.elite-content .ec-answer__q {
color: var(--ec-teal-deep);
font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.4375rem);
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.015em;
text-wrap: balance;
margin: 0 0 var(--ec-2);
}
.elite-content .ec-answer__a {
font-size: 1.0625em;
line-height: 1.7;
color: var(--ec-ink);
margin: 0;
}
/* The marker an answer engine and a speakable schema entry both point at. It
deliberately carries no visual style of its own, because the passage must
look identical whether or not it is being quoted. The rule exists so the
contract is visible here rather than only in the renderer, and so a future
edit does not attach styling to a semantic hook by accident. */
.elite-content .ec-speakable { font-style: inherit; }
@media (min-width: 48rem) {
.elite-content .ec-answer { padding: var(--ec-6); padding-inline-start: var(--ec-7); }
}
/* --------------------------------------------------------------------------
4. Panels. The supporting material: takeaways, checklist, sources, local.
-------------------------------------------------------------------------- */
.elite-content .ec-takeaways,
.elite-content .ec-checklist,
.elite-content .ec-local,
.elite-content .ec-sources,
.elite-content .ec-definition,
.elite-content .ec-assess {
background: var(--ec-surface);
border: 1px solid var(--ec-line);
border-radius: var(--ec-radius);
padding: var(--ec-5);
box-shadow: var(--ec-lift-1);
}
.elite-content .ec-takeaways { background: linear-gradient(180deg, var(--ec-surface) 0%, var(--ec-surface-soft) 100%); }
.elite-content .ec-takeaways__title,
.elite-content .ec-local__title,
.elite-content .ec-sources__title {
display: flex;
align-items: center;
color: var(--ec-teal);
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
margin: 0 0 var(--ec-3);
}
.elite-content .ec-takeaways__title::before,
.elite-content .ec-local__title::before,
.elite-content .ec-sources__title::before {
content: "";
width: 1.25rem;
height: 2px;
margin-inline-end: var(--ec-2);
background: var(--ec-teal);
border-radius: 1px;
}
.elite-content .ec-takeaways__list,
.elite-content .ec-checklist__list,
.elite-content .ec-local__list { list-style: none; margin: 0; padding: 0; }
.elite-content .ec-takeaways__list li,
.elite-content .ec-checklist__list li,
.elite-content .ec-local__list li {
display: flex;
align-items: flex-start;
gap: var(--ec-1);
margin-block-end: var(--ec-3);
line-height: 1.65;
}
.elite-content .ec-takeaways__list li:last-child,
.elite-content .ec-checklist__list li:last-child,
.elite-content .ec-local__list li:last-child { margin-block-end: 0; }
.elite-content .ec-takeaways__list .ec-icon,
.elite-content .ec-local__list .ec-icon { margin-block-start: 0.3em; }
/* An empty box beside each line, because a checklist is meant to be worked
through rather than only read. */
.elite-content .ec-checklist__list .ec-icon { margin-block-start: 0.3em; color: var(--ec-teal-mid); }
.elite-content .ec-sources__list { margin: 0; padding-inline-start: 1.25rem; font-size: 0.9375em; }
.elite-content .ec-sources__list li { margin-block-end: var(--ec-2); }
.elite-content .ec-sources__list li::marker { color: var(--ec-teal); font-weight: 700; }
.elite-content .ec-sources__meta { color: var(--ec-ink-soft); }
.elite-content .ec-definition { border-inline-start: 4px solid var(--ec-teal); }
.elite-content .ec-definition dl { margin: 0; }
.elite-content .ec-definition__term {
color: var(--ec-teal);
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -0.01em;
margin-block-end: var(--ec-1);
}
.elite-content .ec-definition__meaning { margin: 0; }
/* --------------------------------------------------------------------------
5. Callouts and notices. Icon plus label carries the meaning; the tint only
reinforces what the words already say.
-------------------------------------------------------------------------- */
.elite-content .ec-callout,
.elite-content .ec-notice {
border: 1px solid var(--ec-line);
border-inline-start: 4px solid var(--ec-teal);
border-radius: var(--ec-radius-sm);
background: var(--ec-surface-soft);
padding: var(--ec-4) var(--ec-5);
}
.elite-content .ec-callout__label,
.elite-content .ec-notice__label {
display: flex;
align-items: center;
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.09em;
margin: 0 0 var(--ec-2);
color: var(--ec-teal);
}
.elite-content .ec-callout__body > *:last-child,
.elite-content .ec-notice__body { margin-block-end: 0; }
/* Info and update are the neutral defaults. They are declared rather than left
implicit, so a reader of this file can see the full set of tones in one place
and a future edit to the base rule cannot silently change what they look
like. */
.elite-content .ec-callout--info,
.elite-content .ec-notice--update { border-inline-start-color: var(--ec-teal); background: var(--ec-surface-soft); padding:25px;}
.elite-content .ec-callout--info .ec-callout__label,
.elite-content .ec-notice--update .ec-notice__label { color: var(--ec-teal); }
.elite-content .ec-callout--warning { border-color: var(--ec-warning-line); border-inline-start-color: var(--ec-warning); background: var(--ec-warning-wash); }
.elite-content .ec-callout--warning .ec-callout__label,
.elite-content .ec-callout--warning .ec-icon { color: var(--ec-warning); }
.elite-content .ec-callout--risk,
.elite-content .ec-notice--correction { border-color: var(--ec-risk-line); border-inline-start-color: var(--ec-risk); background: var(--ec-risk-wash); }
.elite-content .ec-callout--risk .ec-callout__label,
.elite-content .ec-callout--risk .ec-icon,
.elite-content .ec-notice--correction .ec-notice__label,
.elite-content .ec-notice--correction .ec-icon { color: var(--ec-risk); }
.elite-content .ec-callout--success { border-color: var(--ec-success-line); border-inline-start-color: var(--ec-success); background: var(--ec-success-wash); }
.elite-content .ec-callout--success .ec-callout__label,
.elite-content .ec-callout--success .ec-icon { color: var(--ec-success); }
/* --------------------------------------------------------------------------
6. Numbered steps. The numbers are joined by a spine, so the sequence reads
as one process rather than four separate paragraphs.
-------------------------------------------------------------------------- */
.elite-content .ec-steps__list { list-style: none; margin: 0; padding: 0; }
.elite-content .ec-steps__item {
position: relative;
display: grid;
grid-template-columns: 3.5rem 1.9fr;
gap: var(--ec-4);
padding-block-end: var(--ec-6);
}
.elite-content .ec-steps__item:last-child { padding-block-end: 0; }
/* The connecting line. It stops at the last step so the process has a visible
end rather than trailing off. */
.elite-content .ec-steps__item:not(:last-child)::before {
content: "";
position: absolute;
inset-inline-start: 1.25rem;
inset-block: 2.75rem var(--ec-2);
width: 2px;
background: linear-gradient(180deg, var(--ec-teal) 0%, var(--ec-line) 100%);
border-radius: 1px;
}
.elite-content .ec-steps__num {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: linear-gradient(140deg, var(--ec-teal-mid), var(--ec-teal));
color: #ffffff;
font-weight: 700;
font-size: 0.9375rem;
font-variant-numeric: tabular-nums;
box-shadow: 0 0 0 4px var(--ec-surface), var(--ec-lift-1);
position: relative;
z-index: 1;
}
.elite-content .ec-steps__title {
color: var(--ec-teal);
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -0.01em;
margin: 0.4rem 0 var(--ec-2);
}
.elite-content .ec-steps__body > *:last-child { margin-block-end: 0; }
/* A step is only finished when the reader can tell it is finished. */
.elite-content .ec-steps__done {
display: block;
background: var(--ec-teal-wash);
border-radius: var(--ec-radius-sm);
padding: var(--ec-2) var(--ec-3);
font-size: 0.9375em;
line-height: 1.55;
margin-block-start: var(--ec-3);
}
.elite-content .ec-steps__done strong { color: var(--ec-teal); }
/* --------------------------------------------------------------------------
7. Comparison table
-------------------------------------------------------------------------- */
.elite-content .ec-tablewrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--ec-line);
border-radius: var(--ec-radius);
background: var(--ec-surface);
box-shadow: var(--ec-lift-2);
}
.elite-content .ec-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.elite-content .ec-table__caption {
caption-side: bottom;
padding: var(--ec-3) var(--ec-4);
color: var(--ec-ink-soft);
font-size: 0.875rem;
line-height: 1.5;
text-align: start;
border-block-start: 1px solid var(--ec-line-soft);
padding-left: 25px;
}
.elite-content .ec-table th,
.elite-content .ec-table td {
padding: var(--ec-3) var(--ec-4);
text-align: start;
vertical-align: top;
border-block-end: 1px solid var(--ec-line-soft);
line-height: 1.55;
padding-left: 25px;
}
.elite-content .ec-table thead th {
background: linear-gradient(180deg, var(--ec-teal) 0%, var(--ec-teal-deep) 100%);
color: #ffffff;
font-weight: 650;
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: nowrap;
/* The header stays put while a long table scrolls, so the reader never
loses track of which column they are in. */
position: sticky;
top: 0;
z-index: 1;
}
.elite-content .ec-table tbody th { font-weight: 650; color: var(--ec-teal); padding-left: 25px;}
.elite-content .ec-table tbody tr:last-child th,
.elite-content .ec-table tbody tr:last-child td { border-block-end: 0; padding-left: 25px; padding-left: 25px;}
.elite-content .ec-table tbody tr:nth-child(even) { background: var(--ec-surface-soft); padding-left: 25px; }
.elite-content .ec-table tbody tr:hover { background: var(--ec-teal-wash-soft); padding-left: 25px; }
/* The emphasised column. Marked by tint and a border, and its header keeps a
visible label, so the emphasis survives greyscale printing. */
.elite-content .ec-table th.is-focus { background: linear-gradient(180deg, var(--ec-teal-mid) 0%, var(--ec-teal) 100%); padding-left: 25px;}
.elite-content .ec-table td.is-focus {
background: var(--ec-teal-wash);
box-shadow: inset 1px 0 0 rgba(0, 55, 55, 0.16), inset -1px 0 0 rgba(0, 55, 55, 0.16);
font-weight: 550;
padding-left: 25px;
}
/* Below this width a table stops being a grid and becomes a stack of labelled
records. Sideways scrolling on a phone hides columns the reader never finds. */
@media (max-width: 46rem) {
.elite-content .ec-tablewrap { overflow-x: visible; border: 0; box-shadow: none; background: none; }
.elite-content .ec-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.elite-content .ec-table tbody tr {
display: block;
border: 1px solid var(--ec-line);
border-radius: var(--ec-radius);
margin-block-end: var(--ec-3);
background: var(--ec-surface);
box-shadow: var(--ec-lift-1);
overflow: hidden;
padding-left: 25px;
}
.elite-content .ec-table tbody tr:nth-child(even),
.elite-content .ec-table tbody tr:hover { background: var(--ec-surface); }
.elite-content .ec-table tbody th {
display: block;
background: linear-gradient(135deg, var(--ec-teal) 0%, var(--ec-teal-deep) 100%);
color: #ffffff;
font-size: 1rem;
padding-left: 25px;
}
.elite-content .ec-table tbody td { display: block; border-block-end: 1px solid var(--ec-line-soft); padding-left: 25px; }
.elite-content .ec-table tbody td:last-child { border-block-end: 0; padding-left: 25px;}
.elite-content .ec-table td.is-focus { box-shadow: inset 3px 0 0 var(--ec-teal); padding-left: 25px;}
.elite-content .ec-table tbody td::before {
content: attr(data-label);
display: block;
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ec-teal);
margin-block-end: var(--ec-1);
padding-left: 25px;
}
.elite-content .ec-table__caption { border: 0; padding-inline: 0; padding-left: 25px; }
}
/* --------------------------------------------------------------------------
8. Card grids: pros and cons, metrics, pricing, decisions
-------------------------------------------------------------------------- */
.elite-content .ec-proscons__grid,
.elite-content .ec-metrics__grid,
.elite-content .ec-pricing__grid,
.elite-content .ec-decision__list { display: grid; gap: var(--ec-4); grid-template-columns: 1fr; }
@media (min-width: 44rem) {
.elite-content .ec-proscons__grid { grid-template-columns: repeat(2, 1fr); gap: var(--ec-5); }
.elite-content .ec-metrics__grid { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.elite-content .ec-pricing__grid { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--ec-5); }
}
.elite-content .ec-proscons__col,
.elite-content .ec-metric,
.elite-content .ec-pricing__card,
.elite-content .ec-decision__rule {
background: var(--ec-surface);
border: 1px solid var(--ec-line);
border-radius: var(--ec-radius);
padding: var(--ec-5);
box-shadow: var(--ec-lift-1);
transition: transform var(--ec-normal) var(--ec-ease), box-shadow var(--ec-normal) var(--ec-ease);
}
/* A one pixel lift. Enough to feel responsive, small enough that it never
reflows the line below it. */
.elite-content .ec-metric:hover,
.elite-content .ec-pricing__card:hover,
.elite-content .ec-decision__rule:hover { transform: translateY(-2px); box-shadow: var(--ec-lift-3); }
.elite-content .ec-proscons__col { border-block-start: 3px solid var(--ec-line); }
.elite-content .ec-proscons__col--pro { border-block-start-color: var(--ec-success); }
.elite-content .ec-proscons__col--con { border-block-start-color: var(--ec-warning); }
.elite-content .ec-proscons__col--pro .ec-icon { color: var(--ec-success); }
.elite-content .ec-proscons__col--con .ec-icon { color: var(--ec-warning); }
.elite-content .ec-proscons__title {
display: flex;
align-items: center;
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
margin: 0 0 var(--ec-3);
color: var(--ec-ink);
}
.elite-content .ec-proscons__col ul { margin: 0; padding-inline-start: 1.15rem; }
.elite-content .ec-proscons__col li { margin-block-end: var(--ec-2); line-height: 1.6; }
.elite-content .ec-proscons__col li:last-child { margin-block-end: 0; }
.elite-content .ec-proscons__col--pro li::marker { color: var(--ec-success); }
.elite-content .ec-proscons__col--con li::marker { color: var(--ec-warning); }
.elite-content .ec-metric { text-align: center; position: relative; overflow: hidden; }
.elite-content .ec-metric::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: 0;
height: 3px;
background: linear-gradient(90deg, var(--ec-teal), var(--ec-teal-mid));
}
.elite-content .ec-metric__v {
color: var(--ec-teal);
font-size: clamp(2.25rem, 1.7rem + 2vw, 3rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.035em;
/* Tabular figures, so a row of numbers lines up rather than jitters. */
font-variant-numeric: tabular-nums;
margin: 0;
}
.elite-content .ec-metric__l { font-weight: 650; line-height: 1.4; margin: var(--ec-2) 0 0; }
/* The source is always visible. A figure the reader cannot trace is a figure
they have no reason to believe. */
.elite-content .ec-metric__s {
color: var(--ec-ink-soft);
font-size: 0.8125rem;
line-height: 1.45;
margin: var(--ec-2) 0 0;
padding-block-start: var(--ec-2);
border-block-start: 1px solid var(--ec-line-soft);
}
.elite-content .ec-pricing__card { display: flex; flex-direction: column; }
.elite-content .ec-pricing__name { color: var(--ec-teal); font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.elite-content .ec-pricing__price {
font-size: 2rem;
font-weight: 800;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
color: var(--ec-ink);
margin: var(--ec-1) 0 0;
}
.elite-content .ec-pricing__who { color: var(--ec-ink-soft); font-size: 0.9375rem; line-height: 1.5; margin: var(--ec-2) 0 0; }
.elite-content .ec-pricing__list {
list-style: none;
margin: var(--ec-4) 0 0;
padding: var(--ec-4) 0 0;
border-block-start: 1px solid var(--ec-line-soft);
flex: 1;
}
.elite-content .ec-pricing__list li { display: flex; align-items: flex-start; font-size: 0.9375rem; line-height: 1.55; margin-block-end: var(--ec-2); }
.elite-content .ec-pricing__list .ec-icon { margin-block-start: 0.2em; }
.elite-content .ec-pricing__cta { margin: var(--ec-5) 0 0; }
.elite-content .ec-pricing__cta .ec-btn { display: block; text-align: center; }
.elite-content .ec-decision__rule { border-inline-start: 4px solid var(--ec-teal); }
.elite-content .ec-decision__when,
.elite-content .ec-decision__then { display: flex; align-items: baseline; gap: var(--ec-2); margin: 0 0 var(--ec-2); line-height: 1.6; }
.elite-content .ec-decision__tag {
flex-shrink: 0;
min-width: 3.5rem;
padding: 0.15rem 0.55rem;
border-radius: var(--ec-1);
background: var(--ec-teal);
color: #ffffff;
font-size: 0.6875rem;
font-weight: 700;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.09em;
}
.elite-content .ec-decision__then .ec-decision__tag { background: var(--ec-success); }
.elite-content .ec-decision__why {
color: var(--ec-ink-soft);
font-size: 0.9375rem;
line-height: 1.55;
margin: var(--ec-3) 0 0;
padding-block-start: var(--ec-3);
border-block-start: 1px dashed var(--ec-line);
}
/* --------------------------------------------------------------------------
9. FAQ and accordion
-------------------------------------------------------------------------- */
.elite-content .ec-faq__item,
.elite-content .ec-accordion__item {
border: 1px solid var(--ec-line);
border-radius: var(--ec-radius);
margin-block-end: var(--ec-3);
background: var(--ec-surface);
box-shadow: var(--ec-lift-1);
transition: border-color var(--ec-fast) var(--ec-ease), box-shadow var(--ec-fast) var(--ec-ease);
}
.elite-content .ec-faq__item:last-child,
.elite-content .ec-accordion__item:last-child { margin-block-end: 0; }
.elite-content details[open].ec-faq__item,
.elite-content details[open].ec-accordion__item { border-color: rgba(0, 55, 55, 0.28); box-shadow: var(--ec-lift-2); }
.elite-content .ec-faq__q,
.elite-content .ec-accordion__label {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ec-3);
padding: var(--ec-4) var(--ec-5);
/* Comfortably above the 44 pixel minimum for a touch target. */
min-height: 3.25rem;
font-weight: 650;
font-size: 1.0625rem;
line-height: 1.45;
color: var(--ec-teal);
cursor: pointer;
list-style: none;
border-radius: inherit;
transition: background var(--ec-fast) var(--ec-ease);
}
.elite-content .ec-faq__q::-webkit-details-marker,
.elite-content .ec-accordion__label::-webkit-details-marker { display: none; }
.elite-content .ec-faq__q:hover,
.elite-content .ec-accordion__label:hover { background: var(--ec-teal-wash-soft); }
.elite-content .ec-faq__q:active,
.elite-content .ec-accordion__label:active { background: var(--ec-teal-wash); }
/* The chevron sits in a circular affordance, so it reads as a control rather
as decoration. */
.elite-content .ec-faq__chev {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background: var(--ec-teal-wash);
color: var(--ec-teal);
font-size: 0.875rem;
transition: transform var(--ec-normal) var(--ec-ease), background var(--ec-fast) var(--ec-ease);
}
.elite-content details[open] > summary .ec-faq__chev { transform: rotate(180deg); background: var(--ec-teal); color: #ffffff; }
.elite-content .ec-faq__a,
.elite-content .ec-accordion__body { padding: 0 var(--ec-5) var(--ec-5); }
.elite-content .ec-faq__a > *:last-child,
.elite-content .ec-accordion__body > *:last-child { margin-block-end: 0; }
/* A short reveal. Content appears in place rather than snapping, which gives
the eye a moment to find where the answer starts. */
.elite-content details[open] > .ec-faq__a,
.elite-content details[open] > .ec-accordion__body { animation: ec-reveal var(--ec-normal) var(--ec-ease); }
@keyframes ec-reveal {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
/* --------------------------------------------------------------------------
10. Quote, evidence, timeline
-------------------------------------------------------------------------- */
.elite-content .ec-quote { margin-inline: 0; padding-inline-start: var(--ec-5); position: relative; }
.elite-content .ec-quote::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: 4px;
border-radius: 2px;
background: linear-gradient(180deg, var(--ec-teal), transparent);
}
.elite-content .ec-quote blockquote { border: 0; margin: 0; padding: 0; }
.elite-content .ec-quote blockquote p {
font-size: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);
line-height: 1.5;
font-weight: 500;
letter-spacing: -0.012em;
color: var(--ec-teal-deep);
text-wrap: pretty;
margin: 0;
}
.elite-content .ec-quote__by { color: var(--ec-ink-soft); font-size: 0.9375rem; font-weight: 600; margin-block-start: var(--ec-3); }
.elite-content .ec-evidence {
border: 1px solid rgba(0, 55, 55, 0.2);
border-radius: var(--ec-radius);
background: linear-gradient(160deg, var(--ec-teal-wash) 0%, var(--ec-teal-wash-soft) 100%);
padding: var(--ec-5);
box-shadow: var(--ec-lift-1);
}
.elite-content .ec-evidence__claim {
display: flex;
align-items: flex-start;
font-weight: 700;
font-size: 1.0625rem;
line-height: 1.5;
color: var(--ec-teal-deep);
margin: 0 0 var(--ec-2);
}
.elite-content .ec-evidence__claim .ec-icon { margin-block-start: 0.15em; }
.elite-content .ec-evidence__body { margin: 0; }
.elite-content .ec-evidence__src {
margin: var(--ec-3) 0 0;
padding-block-start: var(--ec-3);
border-block-start: 1px solid rgba(0, 55, 55, 0.14);
font-size: 0.9375rem;
}
.elite-content .ec-timeline__list {
list-style: none;
margin: 0;
padding: 0 0 0 var(--ec-5);
border-inline-start: 2px solid var(--ec-line);
}
.elite-content .ec-timeline__item { position: relative; padding-block-end: var(--ec-6); }
.elite-content .ec-timeline__item:last-child { padding-block-end: 0; }
.elite-content .ec-timeline__item::before {
content: "";
position: absolute;
inset-inline-start: calc(var(--ec-5) * -1 - 7px);
inset-block-start: 0.45rem;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--ec-teal);
box-shadow: 0 0 0 4px var(--ec-surface), 0 0 0 5px var(--ec-line);
}
.elite-content .ec-timeline__when {
display: inline-block;
color: var(--ec-teal);
background: var(--ec-teal-wash);
border-radius: var(--ec-1);
padding: 0.1rem 0.5rem;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
margin: 0;
}
.elite-content .ec-timeline__what { color: var(--ec-teal); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; margin: var(--ec-2) 0 var(--ec-1); }
.elite-content .ec-timeline__item p:last-child { margin-block-end: 0; }
/* --------------------------------------------------------------------------
11. Conversion. The only full width element on the page.
-------------------------------------------------------------------------- */
.elite-content .ec-cta,
.elite-content .ec-service {
position: relative;
/* A radial highlight over a diagonal base, so the band has depth instead of
reading as one flat rectangle of colour. */
background:
radial-gradient(80rem 30rem at 50% -40%, rgba(220, 255, 255, 0.16), transparent 65%),
linear-gradient(150deg, var(--ec-teal) 0%, var(--ec-teal-deep) 100%);
color: #ffffff;
overflow: hidden;
}
.elite-content .ec-cta { padding: var(--ec-7) var(--ec-4); }
.elite-content .ec-cta__inner { max-width: 46rem; margin-inline: auto; text-align: center; }
.elite-content .ec-service { border-radius: var(--ec-radius-lg); padding: var(--ec-6) var(--ec-5); text-align: center; box-shadow: var(--ec-lift-2); }
.elite-content .ec-cta__h,
.elite-content .ec-service__name {
color: #ffffff;
font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.125rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
text-wrap: balance;
margin: 0 0 var(--ec-3);
}
.elite-content .ec-cta__body,
.elite-content .ec-service__fit {
color: #d3f5f5;
font-size: 1.0625rem;
line-height: 1.6;
margin: 0 auto var(--ec-5);
max-width: 48ch;
}
.elite-content .ec-cta__action { margin: 0; }
/* What happens after the click. Naming the next step removes the hesitation
that stops people acting. */
.elite-content .ec-cta__next {
display: inline-flex;
align-items: center;
color: #d3f5f5;
font-size: 0.9375rem;
margin: var(--ec-4) 0 0;
}
.elite-content .ec-cta__next .ec-icon { color: #d3f5f5; }
.elite-content .ec-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ec-2);
padding: var(--ec-3) var(--ec-6);
/* Above the 44 pixel minimum touch target on every screen size. */
min-height: 3.25rem;
border-radius: var(--ec-radius-sm);
background: #ffffff;
color: var(--ec-teal);
font-size: 1.0625rem;
font-weight: 700;
text-decoration: none;
box-shadow: var(--ec-lift-2);
transition: transform var(--ec-fast) var(--ec-ease),
box-shadow var(--ec-fast) var(--ec-ease),
background var(--ec-fast) var(--ec-ease);
}
.elite-content .ec-btn:hover { transform: translateY(-2px); box-shadow: var(--ec-lift-3); background: var(--ec-teal-wash); text-decoration: none; }
/* Pressing returns the button to the surface, so the click is felt. */
.elite-content .ec-btn:active { transform: translateY(0); box-shadow: var(--ec-lift-1); }
/* The dominant action on the page. It is larger than a secondary button, so
priority is visible before the label is read. */
.elite-content .ec-btn--primary {
padding-inline: var(--ec-7);
min-height: 3.5rem;
font-size: 1.125rem;
letter-spacing: -0.005em;
}
.elite-content .ec-cta :focus-visible,
.elite-content .ec-service :focus-visible { outline-color: #ffffff; box-shadow: 0 0 0 6px rgba(0, 36, 36, 0.6); }
/* Inside a light card the button inverts, so contrast holds either way. */
.elite-content .ec-pricing__cta .ec-btn,
.elite-content .ec-service .ec-btn { background: var(--ec-teal); color: #ffffff; }
.elite-content .ec-pricing__cta .ec-btn:hover,
.elite-content .ec-service .ec-btn:hover { background: var(--ec-teal-mid); }
.elite-content .ec-service .ec-btn { background: #ffffff; color: var(--ec-teal); }
.elite-content .ec-service .ec-btn:hover { background: var(--ec-teal-wash); }
/* --------------------------------------------------------------------------
12. Related content, author, assessment
-------------------------------------------------------------------------- */
.elite-content .ec-related__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ec-3); }
.elite-content .ec-related__list li {
border: 1px solid var(--ec-line);
border-radius: var(--ec-radius);
padding: var(--ec-4) var(--ec-5);
background: var(--ec-surface);
box-shadow: var(--ec-lift-1);
transition: border-color var(--ec-fast) var(--ec-ease), transform var(--ec-fast) var(--ec-ease), box-shadow var(--ec-fast) var(--ec-ease);
}
.elite-content .ec-related__list li:hover { border-color: var(--ec-teal); transform: translateX(3px); box-shadow: var(--ec-lift-2); }
.elite-content .ec-related__list a { font-weight: 650; font-size: 1.0625rem; }
.elite-content .ec-related__why { display: block; color: var(--ec-ink-soft); font-size: 0.9375rem; line-height: 1.5; margin-block-start: var(--ec-1); }
.elite-content .ec-author {
border: 1px solid var(--ec-line);
border-block-start: 3px solid var(--ec-teal);
background: var(--ec-surface-soft);
border-radius: var(--ec-radius);
padding: var(--ec-5);
}
.elite-content .ec-author__name { color: var(--ec-teal); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; margin: 0; }
.elite-content .ec-author__role { color: var(--ec-ink-soft); font-size: 0.9375rem; font-weight: 600; margin: 0.1rem 0 var(--ec-2); }
.elite-content .ec-author__bio { margin: 0; font-size: 0.9375rem; line-height: 1.6; }
/* The review date is a trust signal, so it is legible rather than hidden in
small print. */
.elite-content .ec-author__dates {
color: var(--ec-ink-soft);
font-size: 0.8125rem;
margin: var(--ec-3) 0 0;
padding-block-start: var(--ec-3);
border-block-start: 1px solid var(--ec-line);
}
.elite-content .ec-assess { border-inline-start: 4px solid var(--ec-teal); }
.elite-content .ec-assess__intro { margin-block-end: var(--ec-4); }
.elite-content .ec-assess__list { margin: 0; padding-inline-start: 1.35rem; }
.elite-content .ec-assess__q { margin-block-end: var(--ec-3); line-height: 1.6; }
.elite-content .ec-assess__q::marker { color: var(--ec-teal); font-weight: 700; }
.elite-content .ec-assess__q:last-child { margin-block-end: 0; }
.elite-content .ec-assess__close {
margin: var(--ec-4) 0 0;
padding-block-start: var(--ec-4);
border-block-start: 1px solid var(--ec-line);
font-weight: 650;
color: var(--ec-teal);
}
/* ==========================================================================
13. Section layouts
--------------------------------------------------------------------------
A block knows what it says. It does not know how it should sit next to the
block above it. A section groups blocks, gives that group an arrangement and
a background, and turns a long stack into something with visible structure.
Six arrangements, each with a job:
stack One column. The default, and the right choice for an argument
that has to be read in order.
split A main column with a supporting column beside it. Use when the
aside genuinely supports the main text rather than interrupting.
sticky The heading rides in a rail while the body scrolls past. Use for
a long section where the reader could lose the thread.
bento A mixed width grid. Use for comparable units such as metrics,
where relative size is itself information.
band A full width tinted band. Use sparingly, for a decision point.
feature Alternating sides, so a run of sections has cadence instead of
repeating the same arrangement down the page.
Every one of them is a single column on a phone. The arrangements only
appear once there is enough width for them to help rather than cramp.
========================================================================== */
.elite-content > .ec-section { grid-column: full; margin-block: 0; }
.ec-section--full-width {
width: 100%;
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
/* The inner element repeats the page grid, so a section's children line up
exactly with the children of a page that uses no sections at all. The section
background is what runs full width; the content inside it never exceeds the
container. */
.ec-section__inner {
display: grid;
grid-template-columns:
[full-start] minmax(var(--ec-pad, 1.25rem), 1fr)
[wide-start] minmax(0, calc((var(--ec-container, 1290px) - var(--ec-measure, 68ch)) / 2))
[text-start] minmax(0, var(--ec-measure, 68ch)) [text-end]
minmax(0, calc((var(--ec-container, 1290px) - var(--ec-measure, 68ch)) / 2)) [wide-end]
minmax(var(--ec-pad, 1.25rem), 1fr) [full-end];
/* Section padding scales with the viewport rather than stepping at a
breakpoint, so the vertical rhythm holds at every width. */
padding-block: clamp(3rem, 5vw, 70px);
}
.ec-section__inner > * { grid-column: text; margin-block: 0 var(--ec-5); min-width: 0; }
.ec-section__inner > *:last-child { margin-block-end: 0; }
.ec-section__inner > .ec-section__cols,
.ec-section__inner > .ec-section__bento,
.ec-section__inner > .ec-compare,
.ec-section__inner > .ec-metrics,
.ec-section__inner > .ec-pricing,
.ec-section__inner > .ec-proscons,
.ec-section__inner > .ec-timeline,
.ec-section__inner > .ec-decision { grid-column: wide; }
.ec-section__inner > .ec-cta { grid-column: full; margin-block: var(--ec-6) 0; }
@media (min-width: 48rem) {
.ec-section__inner > * { margin-block-end: var(--ec-6); }
}
/* --- Background rhythm --------------------------------------------------- */
/* Tone alternates automatically, and two touching sections never share one.
Two identical bands in a row read as a single long section, which loses the
boundary the rhythm was there to create. */
.ec-tone--plain { background: var(--ec-surface); }
.ec-tone--soft {
background:
radial-gradient(50rem 24rem at 15% 0%, rgba(220, 255, 255, 0.5), transparent 70%),
var(--ec-surface-soft);
/* Hairlines rather than a hard edge, so the change of surface is felt more
than seen. */
border-block: 1px solid var(--ec-line-soft);
}
.ec-tone--gray {
background: #f8f9fa;
border-block: 1px solid var(--ec-line-soft);
}
.ec-tone--deep {
background:
radial-gradient(70rem 28rem at 50% -30%, rgba(220, 255, 255, 0.14), transparent 65%),
linear-gradient(155deg, var(--ec-teal) 0%, var(--ec-teal-deep) 100%);
color: #ffffff;
}
/* Everything inside a dark band inverts, including the elements that normally
carry their own light surface. Contrast is checked in both directions. */
.ec-tone--deep .ec-heading,
.ec-tone--deep .ec-section__title,
.ec-tone--deep .ec-metric__v,
.ec-tone--deep .ec-timeline__what,
.ec-tone--deep .ec-prose strong { color: #ffffff; }
.ec-tone--deep .ec-heading--h2::before { background: #7fd6d6; }
.ec-tone--deep .ec-section__eyebrow { color: #9fe3e3; }
.ec-tone--deep .ec-section__lede,
.ec-tone--deep .ec-metric__l { color: #d3f5f5; }
.ec-tone--deep .ec-metric__s { color: #a9dede; border-block-start-color: rgba(255, 255, 255, 0.22); }
.ec-tone--deep .ec-icon { color: #7fd6d6; }
.ec-tone--deep a { color: #ffffff; text-decoration-color: rgba(255, 255, 255, 0.5); }
.ec-tone--deep a:hover { text-decoration-color: #ffffff; }
.ec-tone--deep :focus-visible { outline-color: #ffffff; box-shadow: 0 0 0 6px rgba(0, 36, 36, 0.6); }
.ec-tone--deep .ec-metric,
.ec-tone--deep .ec-proscons__col,
.ec-tone--deep .ec-decision__rule,
.ec-tone--deep .ec-related__list li {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: none;
}
.ec-tone--deep .ec-metric::before { background: linear-gradient(90deg, #7fd6d6, rgba(127, 214, 214, 0.3)); }
.ec-tone--deep .ec-takeaways,
.ec-tone--deep .ec-checklist,
.ec-tone--deep .ec-sources,
.ec-tone--deep .ec-local,
.ec-tone--deep .ec-definition,
.ec-tone--deep .ec-assess {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.2);
color: #ffffff;
box-shadow: none;
}
.ec-tone--deep .ec-takeaways__title,
.ec-tone--deep .ec-sources__title,
.ec-tone--deep .ec-local__title,
.ec-tone--deep .ec-definition__term { color: #7fd6d6; }
.ec-tone--deep .ec-takeaways__title::before,
.ec-tone--deep .ec-sources__title::before,
.ec-tone--deep .ec-local__title::before { background: #7fd6d6; }
.ec-tone--deep .ec-sources__meta { color: #a9dede; }
/* A conversion band inside a dark section would disappear, so it inverts to a
light surface and keeps standing out. */
.ec-tone--deep .ec-cta {
background: #ffffff;
color: var(--ec-ink);
}
.ec-tone--deep .ec-cta__h { color: var(--ec-teal); }
.ec-tone--deep .ec-cta__body,
.ec-tone--deep .ec-cta__next { color: var(--ec-ink-soft); }
.ec-tone--deep .ec-cta__next .ec-icon { color: var(--ec-teal); }
.ec-tone--deep .ec-cta .ec-btn { background: var(--ec-teal); color: #ffffff; }
.ec-tone--deep .ec-cta .ec-btn:hover { background: var(--ec-teal-mid); }
/* --- Section heading ----------------------------------------------------- */
.ec-section__head { margin-block-end: var(--ec-5); }
.ec-section__head .ec-heading { margin-block-start: 0; }
/* An eyebrow tells the reader what kind of section this is before they read the
title, which speeds up skimming a long page considerably. */
.ec-section__eyebrow {
color: var(--ec-teal);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.11em;
margin: 0 0 15px;
}
/* The opening line sits between the title and the body in both size and weight,
so the eye moves title, opening line, body without ever having to hunt for
where the section actually starts. */
.ec-section__lede {
font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
line-height: 1.6;
color: var(--ec-ink-soft);
text-wrap: pretty;
max-width: 60ch;
margin: var(--ec-3) 0 0;
}
.ec-section--band .ec-section__lede,
.ec-section--bento .ec-section__head { max-width: none; }
/* --- split and feature --------------------------------------------------- */
/* A stack keeps the base grid exactly as it is. The rule is declared anyway so
the default arrangement is visible in this file alongside the other five,
and so its aside is guaranteed to read after the main content rather than
depending on source order alone. */
.ec-section--stack .ec-section__aside { margin-block-start: var(--ec-5); }
.ec-section__cols { display: grid; gap: var(--ec-5); grid-template-columns: 1fr; }
.ec-section__main > *,
.ec-section__aside > *,
.ec-section__rail > * { margin-block: 0 var(--ec-5); }
.ec-section__main > *:last-child,
.ec-section__aside > *:last-child,
.ec-section__rail > *:last-child { margin-block-end: 0; }
@media (min-width: 64rem) {
/* Asymmetric on purpose. Two equal columns of text make the reader choose
where to look; an uneven split makes the main column obviously primary. */
.ec-section--split > .ec-section__inner > .ec-section__cols,
.ec-section--feature > .ec-section__inner > .ec-section__cols {
grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
gap: var(--ec-7);
align-items: start;
}
/* A feature section flips sides on alternate instances, so a run of them
has cadence instead of repeating one arrangement down the page. */
.ec-section--feature.is-reversed > .ec-section__inner > .ec-section__cols {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
}
.ec-section--feature.is-reversed .ec-section__main { order: 2; }
.ec-section--feature.is-reversed .ec-section__aside { order: 1; }
}
/* --- sticky -------------------------------------------------------------- */
@media (min-width: 64rem) {
.ec-section--sticky > .ec-section__inner > .ec-section__cols {
grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr);
gap: var(--ec-7);
align-items: start;
}
/* The rail follows the reader down a long section. The offset clears a
fixed site header, and max-height keeps it scrollable if the rail itself
ever grows taller than the viewport. */
.ec-section--sticky .ec-section__rail {
position: sticky;
top: 6rem;
max-height: calc(100vh - 8rem);
overflow-y: auto;
}
}
/* Sticky positioning fights a reader who has asked for reduced motion, because
the rail appears to slide independently of the page. */
@media (prefers-reduced-motion: reduce) {
.ec-section--sticky .ec-section__rail { position: static; max-height: none; }
}
/* --- bento --------------------------------------------------------------- */
.ec-section__bento { display: grid; gap: var(--ec-4); grid-template-columns: 1fr; }
.ec-bento__cell > * { margin: 0; height: 100%; }
@media (min-width: 44rem) {
.ec-section__bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ec-bento__cell--2,
.ec-bento__cell--3 { grid-column: span 2; }
}
@media (min-width: 64rem) {
.ec-section__bento { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ec-5); }
.ec-bento__cell--2 { grid-column: span 2; }
.ec-bento__cell--3 { grid-column: span 3; }
}
/* --- band ---------------------------------------------------------------- */
/* A band is already a full width surface, so its content sits at the reading
measure and centres, and nothing inside needs its own card. */
.ec-section--band .ec-section__head { text-align: center; }
.ec-section--band .ec-section__lede { margin-inline: auto; }
.ec-section--band .ec-heading--h2 { padding-block-start: var(--ec-5); }
.ec-section--band .ec-heading--h2::before { inset-inline-start: 50%; transform: translateX(-50%); }
/* ==========================================================================
14. Motion
--------------------------------------------------------------------------
Motion here does one job: it tells the reader that a new section has begun.
Nothing animates on load, so nothing competes with reading and nothing delays
the largest contentful paint.
HOW IT IS BUILT, AND WHY
The reveal uses a CSS scroll driven timeline rather than JavaScript. That
choice matters for three reasons. It costs no script, so it cannot slow the
page or fail with a blocked bundle. It runs off the main thread, so scrolling
stays smooth. And because it is inside a support query, a browser that does
not understand it simply shows the content, which is the correct outcome.
THREE GUARDS, BECAUSE INVISIBLE CONTENT IS WORSE THAN NO ANIMATION
1. It only applies where the browser supports scroll driven animation.
2. It only applies when the reader has not asked for reduced motion.
3. It animates opacity and a 12 pixel shift only. Nothing changes size or
position in the layout, so it can never cause a layout shift, and an
element already in view when the page loads resolves to fully visible.
The reveal finishes early, at 22 percent of the way into view, so content is
readable well before the reader reaches it.
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.ec-section__inner > .ec-section__head,
.ec-section__inner > .ec-section__cols,
.ec-section__inner > .ec-section__bento,
.ec-section__inner > .ec-compare,
.ec-section__inner > .ec-metrics,
.ec-section__inner > .ec-pricing,
.ec-section__inner > .ec-proscons,
.ec-section__inner > .ec-timeline,
.ec-section__inner > .ec-decision,
.ec-section__inner > .ec-cta {
animation: ec-rise linear both;
animation-timeline: view();
animation-range: entry 4% cover 22%;
}
/* Cards inside a grid arrive together rather than one at a time. A
staggered cascade looks impressive once and is tiring on every
subsequent scroll, and it delays the last card for no benefit. */
.ec-section__bento > .ec-bento__cell {
animation: ec-rise linear both;
animation-timeline: view();
animation-range: entry 4% cover 26%;
}
/* The sticky rail is excluded. Animating an element that is also being
pinned makes both behaviours look broken. */
.ec-section--sticky .ec-section__rail { animation: none; }
}
}
@keyframes ec-rise {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
/* --------------------------------------------------------------------------
15. Elite Hero, Feature Stages, Why Grid
-------------------------------------------------------------------------- */
.elite-content .ec-hero { padding: 64px 0 52px; background: #ffffff; text-align: center; }
.elite-content .ec-hero__inner { max-width: var(--ec-container); margin: 0 auto; padding: 0 var(--ec-pad); }
.elite-content .ec-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid rgba(3,109,74,0.18); border-radius: 100px; background: rgba(3,109,74,0.08); color: #036d4a; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.elite-content .ec-eyebrow span.dot { width: 6px; height: 6px; border-radius: 50%; background: #036d4a; }
.elite-content .ec-hero__title { max-width: 820px; margin: 18px auto 16px; font-size: clamp(2.1rem, 5.6vw, 3.3rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: var(--ec-ink); }
.elite-content .ec-hero__title span { color: var(--ec-teal); }
.elite-content .ec-hero__lead { max-width: 680px; margin: 0 auto; color: var(--ec-ink-soft); font-size: 1.1rem; line-height: 1.75; }
.elite-content .ec-hero__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; align-items: center; justify-content: center; }
@media (min-width: 600px) { .elite-content .ec-hero__actions { flex-direction: row; } }
.elite-content .ec-stages { padding: 44px 0; }
.elite-content .ec-stages__grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .elite-content .ec-stages__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .elite-content .ec-stages__grid { grid-template-columns: repeat(3, 1fr); } }
.elite-content .ec-stage-card { position: relative; padding: 24px; border: 1px solid var(--ec-line); border-radius: 18px; background: var(--ec-surface); transition: transform var(--ec-fast) var(--ec-ease), box-shadow var(--ec-fast) var(--ec-ease); }
.elite-content .ec-stage-card:hover { transform: translateY(-3px); box-shadow: var(--ec-lift-2); }
.elite-content .ec-stage-card__icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 13px; background: var(--ec-teal-wash-soft); color: var(--ec-teal); font-size: 1.3rem; margin-bottom: 14px; }
.elite-content .ec-stage-card__title { margin: 2px 0 0; font-size: 1.12rem; font-weight: 700; color: var(--ec-ink); line-height: 1.25; }
.elite-content .ec-stage-card__body { margin: 10px 0 14px; color: var(--ec-ink-soft); font-size: 0.92rem; line-height: 1.62; }
.elite-content .ec-stage-card__outcome { display: flex; align-items: flex-start; gap: 8px; padding-top: 14px; border-top: 1px solid var(--ec-line-soft); color: var(--ec-success); font-size: 0.85rem; font-weight: 600; line-height: 1.45; }
.elite-content .ec-stage-card__outcome i { margin-top: 2px; }
.elite-content .ec-why-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .elite-content .ec-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .elite-content .ec-why-grid { grid-template-columns: repeat(3, 1fr); } }
.elite-content .ec-why-card { padding: 24px; border: 1px solid var(--ec-line); border-radius: 16px; background: var(--ec-surface-soft); }
.elite-content .ec-why-card__ico {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: 16px;
border-radius: 13px;
background: var(--ec-teal-wash);
color: var(--ec-teal);
font-size: 1.35rem;
flex-shrink: 0;
}
.elite-content .ec-why-card__title { margin: 0 0 7px; font-size: 1.05rem; font-weight: 700; color: var(--ec-ink); }
.elite-content .ec-why-card__body { margin: 0; color: var(--ec-ink-soft); font-size: 0.9rem; line-height: 1.62;margin-bottom: 20px; margin-top: 15px; }
/* --------------------------------------------------------------------------
16. Reduced motion, print, and forced colours
-------------------------------------------------------------------------- */
/* When the reader has asked for reduced motion, transitions and reveals stop
completely. Nothing here depends on animation to be understood. */
@media (prefers-reduced-motion: reduce) {
.elite-content *,
.elite-content *::before,
.elite-content *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.elite-content .ec-metric:hover,
.elite-content .ec-pricing__card:hover,
.elite-content .ec-decision__rule:hover,
.elite-content .ec-related__list li:hover,
.elite-content .ec-btn:hover { transform: none; }
}
@media print {
.elite-content { display: block; font-size: 10.5pt; color: #000; }
.elite-content > * { margin-inline: 0; width: auto; box-shadow: none !important; }
.elite-content .ec-heading { color: #000; }
/* A collapsed answer would print as a blank line, so everything opens. */
.elite-content details { display: block; }
.elite-content details > summary { list-style: none; font-weight: 700; }
.elite-content .ec-faq__chev { display: none; }
.elite-content .ec-faq__a,
.elite-content .ec-accordion__body { display: block !important; }
.elite-content .ec-cta,
.elite-content .ec-service { border: 1pt solid #000; background: none; color: #000; }
.elite-content .ec-cta__h, .elite-content .ec-cta__body, .elite-content .ec-cta__next,
.elite-content .ec-service__name, .elite-content .ec-service__fit { color: #000; }
.elite-content .ec-table thead th { background: #eee !important; color: #000; }
/* A printed link is useless without its address. */
.elite-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; word-break: break-all; }
.elite-content .ec-tablewrap { overflow: visible; }
/* Never break a table row or a card across two pages. */
.elite-content .ec-metric, .elite-content .ec-pricing__card,
.elite-content .ec-table tr, .elite-content .ec-steps__item { break-inside: avoid; }
.elite-content .ec-heading { break-after: avoid; }
}
/* Forced colours mode replaces the palette entirely, so structural borders have
to be redeclared in system colours or the layout collapses into flat text. */
@media (forced-colors: active) {
.elite-content .ec-answer,
.elite-content .ec-callout,
.elite-content .ec-notice,
.elite-content .ec-metric,
.elite-content .ec-pricing__card,
.elite-content .ec-faq__item,
.elite-content .ec-accordion__item,
.elite-content .ec-evidence,
.elite-content .ec-cta,
.elite-content .ec-service { border: 1px solid CanvasText; }
.elite-content .ec-btn { border: 2px solid ButtonText; }
.elite-content .ec-answer__tag,
.elite-content .ec-decision__tag,
.elite-content .ec-steps__num { border: 1px solid CanvasText; }
.elite-content .ec-faq__chev { border: 1px solid CanvasText; }
}
/* ==========================================================================
NEW ELITE LAYOUT COMPONENTS (Added from User Request)
========================================================================== */
.hero__content-col { width: 100%; }
@media (min-width: 768px) { .hero__content-col { width: 60%; } }
.badge--primary, .badge--centered, .badge, .badge--priority {
display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
border-radius: 100px; background: var(--ec-teal-wash); color: var(--ec-teal);
font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
}
.hero__title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; line-height: 1.1; margin: 20px 0; color: var(--ec-ink); }
.hero__title span { color: var(--ec-teal); }
.hero__description { font-size: 1.125rem; line-height: 1.6; color: var(--ec-ink-soft); margin-bottom: 30px; }
.hero__btn-group, .btn-group--centered, .action-group { display: flex; gap: 15px; flex-wrap: wrap; }
.btn-group--centered { justify-content: center; }
.btn--primary, .btn--secondary {
display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px;
border-radius: 8px; font-weight: 600; text-decoration: none; transition: all 0.2s ease;
}
.btn--primary { background: var(--ec-teal); color: #fff; }
.btn--primary:hover { background: var(--ec-teal-mid); }
.btn--secondary { background: transparent; border: 2px solid var(--ec-line); color: var(--ec-ink); }
.btn--secondary:hover { border-color: var(--ec-teal); }
.hero__stepper { display: flex; gap: 10px; margin-top: 30px; }
.section-header--centered { text-align: center; max-width: 800px; margin: 0 auto 50px; }
.section__title { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; margin: 15px 0; }
.section__description { font-size: 1.125rem; color: var(--ec-ink-soft); }
.grid--3-col { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid--3-col { grid-template-columns: repeat(3, 1fr); } }
.grid--4-col { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .grid--4-col { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--4-col { grid-template-columns: repeat(4, 1fr); } }
.grid--2-col { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid--2-col { grid-template-columns: repeat(2, 1fr); } }
.grid--5-col { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid--5-col { grid-template-columns: repeat(5, 1fr); } }
.card--visual, .feature-card, .pricing-card, .step-card, .stat-card, .card--industry, .finding-card, .card--snapshot, .card--citation {
background: var(--ec-surface); border: 1px solid var(--ec-line); border-radius: 16px; padding: 30px;
box-shadow: var(--ec-lift-1); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card--visual:hover, .feature-card:hover, .pricing-card:hover { transform: translateY(-5px); box-shadow: var(--ec-lift-2); }
.card__image-container { background: var(--ec-surface-soft); height: 200px; border-radius: 8px; margin-bottom: 20px; }
.card__caption { font-size: 0.9rem; color: var(--ec-ink-soft); }
.logo-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; margin-top: 40px; }
.logo-grid__item { display: flex; align-items: center; justify-content: center; height: 60px; filter: grayscale(100%); opacity: 0.6; transition: 0.2s; }
.logo-grid__item:hover { filter: grayscale(0%); opacity: 1; }
.text-block { max-width: 800px; margin: 0 auto; font-size: 1.125rem; line-height: 1.8; }
.text-block__p strong { color: var(--ec-teal); font-weight: 700; }
.process-list { display: flex; flex-direction: column; gap: 20px; }
.process-item { display: flex; gap: 20px; background: var(--ec-surface); padding: 24px; border-radius: 12px; border: 1px solid var(--ec-line); }
.process-item__icon { width: 40px; height: 40px; background: var(--ec-teal); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; }
.process-item__title { margin: 0 0 10px; font-size: 1.25rem; }
.process-item__description { color: var(--ec-ink-soft); }
.process-item__highlight { margin-top: 15px; font-weight: 600; color: var(--ec-teal); display: flex; align-items: center; gap: 8px; }
.feature-card__icon, .card__icon, .list-item__icon { width: 50px; height: 50px; border-radius: 12px; background: var(--ec-teal-wash); color: var(--ec-teal); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 20px; }
.feature-card__title { margin: 0 0 15px; font-size: 1.25rem; }
.cta__content { padding-right: 40px; }
.list--icon { list-style: none; padding: 0; margin: 30px 0; }
.list--icon li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 15px; font-size: 1.1rem; }
.list--icon li i { color: var(--ec-teal); margin-top: 4px; }
.accordion-container { max-width: 800px; margin: 0 auto; }
.accordion__item { border: 1px solid var(--ec-line); border-radius: 8px; margin-bottom: 15px; background: var(--ec-surface); overflow: hidden; }
.accordion__trigger { display: flex; justify-content: space-between; padding: 20px; font-weight: 700; cursor: pointer; }
.accordion__content { padding: 0 20px 20px; color: var(--ec-ink-soft); line-height: 1.7; display: none; }
details.accordion__item summary { display: flex; justify-content: space-between; padding: 20px; font-weight: 700; cursor: pointer; list-style: none; }
details.accordion__item summary::-webkit-details-marker { display: none; }
details.accordion__item[open] .accordion__content { display: block; }
details.accordion__item p { padding: 0 20px 20px; margin: 0; color: var(--ec-ink-soft); }
.pricing-card__target { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--ec-teal); letter-spacing: 0.1em; display: block; margin-bottom: 10px; }
.pricing-card__price { font-size: 3rem; font-weight: 800; color: var(--ec-ink); margin: 20px 0; display: flex; align-items: baseline; gap: 5px; }
.pricing-card__price span { font-size: 1rem; color: var(--ec-ink-soft); font-weight: 400; }
.breadcrumbs__list { display: flex; gap: 10px; align-items: center; list-style: none; padding: 0; font-size: 0.85rem; margin-bottom: 30px; color: var(--ec-ink-soft); }
.breadcrumbs__list a { color: var(--ec-teal); text-decoration: none; }
.article-hero__title { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.15; margin: 0 0 20px; }
.author-meta--inline { display: flex; align-items: center; gap: 15px; margin: 30px 0; }
.author-meta--inline img { width: 50px; height: 50px; border-radius: 50%; }
.toc__container { background: var(--ec-surface-soft); padding: 30px; border-radius: 12px; border: 1px solid var(--ec-line); }
.toc__list { list-style: none; padding: 0; margin: 20px 0 0; }
.toc__list li { margin-bottom: 10px; }
.toc__list a { color: var(--ec-teal); text-decoration: none; font-weight: 500; }
.panel--highlight, .panel--subtle { background: var(--ec-teal-wash-soft); border-left: 4px solid var(--ec-teal); padding: 30px; border-radius: 0 12px 12px 0; }
.list--bulleted { margin: 20px 0 0; padding-left: 20px; }
.list--bulleted li { margin-bottom: 10px; }
.step-card__badge { width: 30px; height: 30px; background: var(--ec-teal); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 20px; }
.data-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.data-table th, .data-table td { padding: 15px; border: 1px solid var(--ec-line); text-align: left; }
.data-table th { background: var(--ec-surface-soft); font-weight: 700; }
.author-box { display: flex; flex-direction: column; gap: 30px; background: var(--ec-surface-soft); padding: 40px; border-radius: 16px; border: 1px solid var(--ec-line); align-items: center; }
@media (min-width: 768px) { .author-box { flex-direction: row; align-items: flex-start; } }
.author-box__media img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.author-box__name { font-size: 1.5rem; font-weight: 700; margin: 0 0 5px; }
.author-box__role { color: var(--ec-teal); font-weight: 600; margin-bottom: 15px; }
.stat-card__metric { font-size: 3rem; font-weight: 800; color: var(--ec-teal); line-height: 1; margin-bottom: 10px; }
.finding-card { position: relative; overflow: hidden; background: var(--ec-teal-wash-soft); }
.finding-card__watermark { position: absolute; top: -10px; right: -10px; font-size: 8rem; font-weight: 900; color: var(--ec-teal); opacity: 0.05; line-height: 1; }
.panel--dark-metric { background: var(--ec-teal-deep); color: #fff; padding: 20px; border-radius: 12px; margin: 20px 0; font-size: 1.25rem; font-weight: 700; }
.cta-block--primary { background: var(--ec-teal-deep); color: #fff; padding: 60px 40px; border-radius: 20px; text-align: center; }
.cta-block__title { font-size: clamp(2rem, 4vw, 2.5rem); margin: 0 0 20px; color: #fff; }
.cta-block__description { font-size: 1.25rem; opacity: 0.9; margin-bottom: 40px; }
.trust-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-bottom: 40px; }
.footer__main-grid { margin: 60px 0; }
.footer__nav-col h3 { font-size: 1.1rem; margin-bottom: 20px; }
.footer__nav-col ul { list-style: none; padding: 0; margin: 0; }
.footer__nav-col li { margin-bottom: 10px; }
.footer__nav-col a { color: var(--ec-ink-soft); text-decoration: none; }
.footer__nav-col a:hover { color: var(--ec-teal); }
.footer__legal-bar { border-top: 1px solid var(--ec-line); padding-top: 30px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; font-size: 0.85rem; color: var(--ec-ink-soft); }
/* ==========================================================================
MISSING ELITE LAYOUT COMPONENTS
========================================================================== */
/* Hero Visual Col */
.hero__visual-col { width: 100%; display: flex; justify-content: center; align-items: center; }
@media (min-width: 768px) { .hero__visual-col { width: 40%; } }
/* Section Footer & Inline Links */
.section-footer { margin-top: 40px; text-align: center; border-top: 1px solid var(--ec-line); padding-top: 20px; }
.link--inline { color: var(--ec-teal); text-decoration: underline; font-weight: 600; }
.link--inline:hover { text-decoration: none; color: var(--ec-teal-mid); }
/* Pricing Footer */
.pricing-footer { margin-top: 20px; text-align: center; font-size: 0.85rem; color: var(--ec-ink-soft); }
.pricing-card__link { display: inline-block; margin-top: 15px; color: var(--ec-teal); font-weight: 600; text-decoration: none; }
/* Article specific Hero & Stats */
.article-hero__actions { margin-top: 25px; display: flex; gap: 15px; }
.article-stats { display: flex; gap: 20px; font-size: 0.9rem; color: var(--ec-ink-soft); background: var(--ec-surface-soft); padding: 15px; border-radius: 8px; margin-top: 20px; }
/* TOC & Panels */
.toc__title { font-size: 1.25rem; font-weight: 700; margin: 0 0 15px; }
.panel__title { font-size: 1.25rem; font-weight: 700; margin: 0 0 10px; color: var(--ec-teal); }
/* Process Steps & Step Cards */
.process-step { border-left: 2px solid var(--ec-teal-wash); padding-left: 20px; margin-bottom: 25px; position: relative; }
.process-step__icon { position: absolute; left: -21px; top: 0; width: 40px; height: 40px; background: #fff; border: 2px solid var(--ec-teal); color: var(--ec-teal); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.process-step__title { margin: 0 0 10px; font-size: 1.25rem; font-weight: 700; }
.process-step__description { color: var(--ec-ink-soft); line-height: 1.6; }
.list--standard { padding-left: 20px; margin: 15px 0; }
.list--standard li { margin-bottom: 10px; }
.step-card { display: flex; flex-direction: column; }
.step-card__title { font-size: 1.15rem; font-weight: 700; margin: 0 0 10px; }
.step-card__description { color: var(--ec-ink-soft); flex-grow: 1; }
.step-card__link { color: var(--ec-teal); font-weight: 600; margin-top: 15px; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
/* Grids & Resources */
.resource-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.platform-grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.link-item--icon { display: flex; align-items: center; gap: 10px; padding: 15px; border: 1px solid var(--ec-line); border-radius: 8px; text-decoration: none; color: var(--ec-ink); font-weight: 600; transition: 0.2s; }
.link-item--icon:hover { border-color: var(--ec-teal); background: var(--ec-teal-wash-soft); }
/* Author Box */
.author-box__socials { display: flex; gap: 15px; margin-top: 15px; }
.author-box__socials a { color: var(--ec-ink-soft); font-size: 1.25rem; transition: color 0.2s; }
.author-box__socials a:hover { color: var(--ec-teal); }
.author-box__bio { color: var(--ec-ink-soft); line-height: 1.7; }
/* Vertical Icon List */
.list--icon-vertical { display: flex; flex-direction: column; gap: 25px; }
.list-item__title { font-size: 1.2rem; font-weight: 700; margin: 0 0 8px; }
.list-item__description { color: var(--ec-ink-soft); margin: 0; }
/* Stat Cards & Industry Cards */
.stat-card__label { color: var(--ec-ink-soft); font-weight: 600; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.05em; }
.card--industry { border-top: 4px solid var(--ec-teal); }
.card__title { font-size: 1.25rem; font-weight: 700; margin: 0 0 15px; }
.card__description { color: var(--ec-ink-soft); line-height: 1.6; }
/* Text Sections */
.text-section--lead { font-size: 1.25rem; font-weight: 500; color: var(--ec-ink); max-width: 900px; margin: 0 auto 40px; text-align: center; }
.text-section--standard { max-width: 800px; margin: 0 auto 40px; }
.text-section__paragraph { margin-bottom: 25px; line-height: 1.8; color: var(--ec-ink); }
/* Charts & Data */
.distribution-chart { display: flex; height: 30px; border-radius: 15px; overflow: hidden; margin: 20px 0; }
.distribution-chart > div { height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.75rem; font-weight: bold; }
.finding-card__title { font-size: 1.5rem; font-weight: 800; color: var(--ec-teal-deep); margin-bottom: 15px; }
.finding-card__intro { font-size: 1.1rem; color: var(--ec-ink-soft); margin-bottom: 20px; }
.finding-card__conclusion { font-weight: 600; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.1); }
/* Recommendations & Metrics Pillar */
.recommendation-item { padding: 25px; border-left: 4px solid var(--ec-teal); background: var(--ec-surface); margin-bottom: 20px; border-radius: 0 8px 8px 0; box-shadow: var(--ec-lift-1); }
.recommendation-item__title { font-size: 1.25rem; margin: 10px 0; font-weight: 700; }
.recommendation-item__description { color: var(--ec-ink-soft); }
.recommendation-item__roi { display: inline-block; margin-top: 15px; padding: 6px 12px; background: var(--ec-success-wash); color: var(--ec-success); font-weight: 700; border-radius: 4px; font-size: 0.85rem; }
.metrics-pillar { text-align: center; padding: 30px; background: var(--ec-surface-soft); border-radius: 12px; }
.metrics-pillar__title { font-size: 1.2rem; font-weight: 700; margin-bottom: 20px; color: var(--ec-teal); }
.list--metrics { list-style: none; padding: 0; margin: 0; }
.list--metrics li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--ec-line); }
.list--metrics li:last-child { border-bottom: none; }
.list--metrics span:last-child { font-weight: 700; }
/* Snapshots & Citations */
.card--snapshot { background: linear-gradient(135deg, var(--ec-teal-deep), var(--ec-teal)); color: #fff; }
.card--snapshot .card__title { color: #fff; }
.card--snapshot .card__description { color: rgba(255,255,255,0.9); }
.citation-box { padding: 20px; background: var(--ec-surface); border: 1px solid var(--ec-line); border-radius: 8px; margin-bottom: 15px; font-style: italic; }
.citation-box__copy { margin: 0; color: var(--ec-ink-soft); }
.cta-block--inline { display: flex; justify-content: space-between; align-items: center; padding: 30px; background: var(--ec-teal-wash-soft); border-radius: 12px; flex-wrap: wrap; gap: 20px; }
/* Footer Elements */
.footer__brand-header { margin-bottom: 30px; }
.footer__social-col { display: flex; gap: 15px; margin-top: 20px; }
.footer__social-col a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--ec-surface-soft); border-radius: 50%; color: var(--ec-ink); transition: 0.2s; }
.footer__social-col a:hover { background: var(--ec-teal); color: #fff; }
/* ==========================================================================
ELITE OVERRIDES: IMMERSIVE 1290px WIDTH & 70px PADDING
========================================================================== */
/* 1. Ensure all inner section content expands to the 1290px container using precise grid limits. */
.ec-section__inner > * {
grid-column: wide-start / wide-end !important;
}
.elite-content > * {
grid-column: wide-start / wide-end !important;
}
/* 2. Enforce exactly 70px top/bottom padding on desktop for that polished, immersive feel. */
@media (min-width: 1024px) {
.elite-content .ec-section {
padding-block: 10px !important;
}
}
/* Ensure mobile still has comfortable scaling padding */
@media (max-width: 1023px) {
.elite-content .ec-section {
padding-block: clamp(3rem, 5vw, 70px) !important;
}
}
/* 3. PROACTIVE VISUALS: Add polished default placeholder backgrounds so missing visuals still look elite. */
.card__image-container {
background: linear-gradient(135deg, var(--ec-teal-wash), var(--ec-line-soft));
min-height: 200px;
border-radius: var(--ec-radius-sm) var(--ec-radius-sm) 0 0;
background-image: url('data:image/svg+xml;utf8,');
background-size: 50%;
background-position: center;
background-repeat: no-repeat;
}
.hero__visual-col {
background: linear-gradient(135deg, var(--ec-teal-wash-soft), var(--ec-teal-wash));
min-height: 350px;
border-radius: var(--ec-radius);
border: 1px solid var(--ec-line);
background-image: url('data:image/svg+xml;utf8,');
background-size: 30%;
background-position: center;
background-repeat: no-repeat;
box-shadow: var(--ec-lift-2);
}
.author-box__media img {
background: var(--ec-line);
width: 80px; height: 80px; border-radius: 50%;
display: inline-block;
object-fit: cover;
}
/* 4. Fix split layout ensuring hero col and visual col sit side-by-side.
Target .ec-section__cols to protect the .ec-section__inner boundary. */
.ec-section--split .ec-section__cols {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: center;
}
@media (min-width: 768px) {
.ec-section--split .ec-section__cols {
grid-template-columns: 1.3fr 1fr;
}
}
/* 5. Tidy component margins to prevent cramped layouts */
.text-section--lead, .text-section--standard { max-width: 100% !important; }
.card--visual { display: flex; flex-direction: column; background: var(--ec-surface); border: 1px solid var(--ec-line); border-radius: var(--ec-radius-sm); overflow: hidden; box-shadow: var(--ec-lift-1); transition: var(--ec-normal) var(--ec-ease); }
.card--visual:hover { transform: translateY(-3px); box-shadow: var(--ec-lift-2); }
.card--visual .card__title, .card--visual .card__caption { padding: 15px 20px 0; }
.card--visual .card__caption { padding-bottom: 20px; }
/* 6. Elite Visuals & Images (.ec-img) Rules */
.elite-content .ec-img {
width: 100%;
height: auto;
max-height: 480px;
object-fit: cover;
border-radius: var(--ec-radius, 16px);
border: 1px solid var(--ec-line, #d7e2e2);
box-shadow: var(--ec-lift-2);
display: block;
transition: transform var(--ec-normal) var(--ec-ease), box-shadow var(--ec-normal) var(--ec-ease);
}
.elite-content .ec-img:hover {
transform: scale(1.02);
box-shadow: var(--ec-lift-3);
}
/* 7. Responsive grid for section columns matching about/pricing layouts */
@media (max-width: 767px) {
.ec-section__cols {
display: flex;
flex-direction: column;
gap: 30px;
}
.ec-section--feature.is-reversed .ec-section__main {
order: 1 !important;
}
.ec-section--feature.is-reversed .ec-section__aside {
order: 2 !important;
}
}