/* =========================================================================== ceASAP — public FAQ accordion (.ce-faq) Rendered by CEASAP\Faq\Faq_Page via templates/faq/page.php. ⚠ SELF-CONTAINED TOKENS, ON PURPOSE. --ce-border, --ce-ink and friends are declared inside cohort-product.css's own :root, not in a global sheet, and cohort-product.css does not load on /faq/. Naming those tokens here without declaring them would leave every border and every ink colour resolving to nothing — a page that looks broken for a reason no rule in it explains. The values are copied from cohort-product.css deliberately; the two accordions are the same object. ⚠ DOUBLED SELECTORS WHERE ASTRA COMPETES. The theme styles summary, h2, a, ul and ol on these pages with its own single-class and element rules. A rule here that matches on one class loses on specificity or source order and does nothing at all — which is how a two-per-row grid, a link underline and a [hidden] toggle each shipped dead earlier in this project. Anything the theme also claims is written as `.ce-faq .ce-faq__x`, and the element resets are written against `.ce-faq` so they carry a class plus an element. ========================================================================= */ .ce-faq { --ce-ink: #0e2747; --ce-body: #33415c; --ce-brand: #1c6fb5; --ce-brand-soft: #e6f1fb; --ce-brand-line: #cfdcec; --ce-surface: #ffffff; --ce-border: rgba(2, 53, 111, 0.12); --ce-muted: #5b6b7f; --ce-radius-md: 12px; --ce-radius-card: 16px; color: var(--ce-body); } /* --- Hero ---------------------------------------------------------------- */ /* ⚠ THE SHARED BAND DOES THE WORK NOW. This was a rounded blue card with its own gradient, its own badge pill and an h1 at weight 800 — the only one of the site's five heroes that was not `.ce-brand-hero`. Scott, 1 Nov 2026: correct it like the others. Everything that duplicated the design system is gone; what is left is this page's own spacing and the one measure fix below. */ /* ⚠ NO OVERLAPPING PANEL BENEATH THIS ONE, so the band does not need the 5.5rem of bottom padding the shared default reserves for one — on the packages pages that space exists to be eaten by a shell pulled up 64px into it, and here it would just be a slab of empty blue. min-height is released for the same reason the catalogue releases it: the 360px default is sized for a hero carrying a photograph, and this one carries three lines of text. */ .ce-faq .ce-faq__hero { min-height: 0; margin-bottom: 26px; } .ce-faq .ce-faq__hero-in { padding-block: 2.4rem 2.6rem; } /* ⚠ NO MEASURE CAP. Scott, 1 Nov 2026: "the sub title needs to span correctly." The 68ch cap broke this sentence across three short lines against a band more than twice that wide, which is what made the hero look half-empty. `.ce-store__phero-sub` and the catalogue's sub both set `none` for the same reason; the band's own 1,200px inner is the only limit it needs. */ .ce-faq .ce-faq__hero-sub { max-width: none; } .ce-faq .ce-faq__toc-intro { margin: -4px 0 12px; color: var(--ce-muted); font-size: 14.5px; } /* --- Jump-to-section nav ------------------------------------------------- */ .ce-faq .ce-faq__toc { background: var(--ce-surface); border: 1px solid var(--ce-border); border-radius: var(--ce-radius-card); padding: 18px 20px; margin-bottom: 26px; } .ce-faq .ce-faq__toc-label { display: block; color: var(--ce-brand); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px; } /* ⚠ A GRID THAT FILLS, NOT A FIXED COLUMN COUNT. auto-fit with a floor lets 15 links sit in four columns on a desktop and one on a phone without a breakpoint per step. */ .ce-faq .ce-faq__toc-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px 18px; margin: 0; padding: 0; list-style: none; } .ce-faq .ce-faq__toc-list li { margin: 0; padding: 0; list-style: none; } .ce-faq .ce-faq__toc-list a { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; color: var(--ce-body); font-size: 14.5px; font-weight: 600; text-decoration: none; border-bottom: 0; } .ce-faq .ce-faq__toc-list a:hover, .ce-faq .ce-faq__toc-list a:focus-visible { color: var(--ce-brand); } .ce-faq .ce-faq__toc-n { flex: none; color: var(--ce-muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } /* --- Section ------------------------------------------------------------- */ /* ⚠ SCROLL-MARGIN, BECAUSE THE SITE HEADER IS STICKY. Without it a #section jump from the nav above lands with the heading hidden behind the header, which reads as "the link went nowhere". */ .ce-faq .ce-faq__section { margin: 0 0 34px; scroll-margin-top: 110px; } .ce-faq .ce-faq__section:last-child { margin-bottom: 0; } .ce-faq .ce-faq__section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .ce-faq .ce-faq__section-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ce-brand-soft); color: var(--ce-brand); } .ce-faq .ce-faq__section-ico svg { width: 20px; height: 20px; display: block; /* the scraped icons carry no stroke-width of their own */ stroke-width: 2; } .ce-faq .ce-faq__section-ico.is-step { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } .ce-faq .ce-faq__section-title { margin: 0; font-size: 21px; line-height: 1.3; font-weight: 700; color: var(--ce-ink); text-wrap: balance; } /* --- Item (same three parts as the cohort/course accordion) -------------- */ .ce-faq .ce-faq__item { background: var(--ce-surface); border: 1px solid var(--ce-border); border-radius: var(--ce-radius-md); margin-bottom: 10px; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease; } .ce-faq .ce-faq__item:last-child { margin-bottom: 0; } .ce-faq .ce-faq__item:hover { border-color: var(--ce-brand-line); box-shadow: 0 6px 18px rgba(16, 39, 71, .07); } .ce-faq .ce-faq__item[open] { border-color: var(--ce-brand-line); box-shadow: 0 8px 24px rgba(16, 39, 71, .09); } .ce-faq .ce-faq__q { display: flex; align-items: center; gap: 14px; padding: 15px 18px; cursor: pointer; list-style: none; font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--ce-ink); } .ce-faq .ce-faq__q::-webkit-details-marker { display: none; } .ce-faq .ce-faq__q::marker { content: ""; } .ce-faq .ce-faq__item:has(> summary:focus-visible) { outline: 2px solid var(--ce-brand); outline-offset: 3px; } .ce-faq .ce-faq__ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ce-brand-soft); color: var(--ce-brand); transition: background .18s ease, color .18s ease; } .ce-faq .ce-faq__item[open] .ce-faq__ico { background: var(--ce-brand); color: #fff; } .ce-faq .ce-faq__ico svg { width: 19px; height: 19px; display: block; } .ce-faq .ce-faq__q-text { flex: 1; min-width: 0; overflow-wrap: anywhere; } /* ⚠ DRAWN, NOT A GLYPH — a font character renders at a different size on every device. Two bars, and the upright one fades out when the item opens, so + becomes −. */ .ce-faq .ce-faq__mark { position: relative; flex: none; width: 18px; height: 18px; } .ce-faq .ce-faq__mark::before, .ce-faq .ce-faq__mark::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #6b7a90; border-radius: 2px; transition: opacity .18s ease, background .18s ease; } .ce-faq .ce-faq__mark::before { width: 13px; height: 2px; } .ce-faq .ce-faq__mark::after { width: 2px; height: 13px; } .ce-faq .ce-faq__item[open] .ce-faq__mark::after { opacity: 0; } .ce-faq .ce-faq__item[open] .ce-faq__mark::before { background: var(--ce-brand); } /* --- Answer -------------------------------------------------------------- */ /* ⚠ 68px INDENTS PAST THE ICON, so the answer lines up with the question rather than the card edge. */ .ce-faq .ce-faq__a { padding: 0 20px 18px 68px; font-size: 15px; line-height: 1.68; color: var(--ce-body); } .ce-faq .ce-faq__a > *:first-child { margin-top: 0; } .ce-faq .ce-faq__a > *:last-child { margin-bottom: 0; } .ce-faq .ce-faq__a p { margin: 0 0 .85em; } .ce-faq .ce-faq__a strong { color: var(--ce-ink); font-weight: 700; } .ce-faq .ce-faq__a em { font-style: italic; } .ce-faq .ce-faq__a a { color: var(--ce-brand); text-decoration: underline; text-underline-offset: 2px; } .ce-faq .ce-faq__a a:hover { text-decoration-thickness: 2px; } .ce-faq .ce-faq__a h4, .ce-faq .ce-faq__a h5 { margin: 1.15em 0 .5em; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--ce-ink); } .ce-faq .ce-faq__a ul, .ce-faq .ce-faq__a ol { margin: 0 0 .9em; padding-left: 1.35em; } .ce-faq .ce-faq__a li { margin: 0 0 .4em; } .ce-faq .ce-faq__a li:last-child { margin-bottom: 0; } /* --- Callouts inside answers -------------------------------------------- */ /* The authored copy carries five of these. Styling them is not decoration: "VERY IMPORTANT" blocks are where the package instructions tell a student which subjects they MUST take live, and an unstyled one reads as ordinary prose. */ .ce-faq .ce-faq__a .callout, .ce-faq .ce-faq__a .example, .ce-faq .ce-faq__a .package-summary { margin: 1em 0; padding: 13px 16px; border-radius: 10px; border-left: 3px solid var(--ce-brand); background: #f5f9fd; font-size: 14.5px; } .ce-faq .ce-faq__a .callout.tip { border-left-color: #1c9b6a; background: #f1faf6; } .ce-faq .ce-faq__a .callout.important { border-left-color: #c9872a; background: #fdf7ee; } /* ⚠ THE LOUDEST ONE THE COPY HAS, and it earns it: this is the block that says "you must complete these as Live/ZOOM to renew". */ .ce-faq .ce-faq__a .callout.very-important { border-left-color: #c0392b; background: #fdf1ef; } .ce-faq .ce-faq__a .example { border-left-color: var(--ce-muted); background: #f7f8fa; } .ce-faq .ce-faq__a .package-summary { border-left-color: var(--ce-brand); background: var(--ce-brand-soft); } .ce-faq .ce-faq__a .callout > *:first-child, .ce-faq .ce-faq__a .example > *:first-child, .ce-faq .ce-faq__a .package-summary > *:first-child { margin-top: 0; } .ce-faq .ce-faq__a .callout > *:last-child, .ce-faq .ce-faq__a .example > *:last-child, .ce-faq .ce-faq__a .package-summary > *:last-child { margin-bottom: 0; } /* --- The NRED disclaimer ------------------------------------------------- */ .ce-faq .ce-faq__notice { margin-top: 26px; background: #fbfcfd; } .ce-faq .ce-faq__notice .ce-faq__ico { background: #f0f2f6; color: var(--ce-muted); } .ce-faq .ce-faq__notice[open] .ce-faq__ico { background: var(--ce-muted); color: #fff; } /* --- Phone --------------------------------------------------------------- */ @media (max-width: 640px) { /* ⚠ THE ICON SQUARE GOES, THE INDENT GOES WITH IT. At 360px the 36px square plus a 68px answer indent leaves under 220px of measure, so a long question wraps to four lines against a column of whitespace. */ .ce-faq .ce-faq__ico { display: none; } .ce-faq .ce-faq__q { gap: 10px; padding: 13px 14px; font-size: 15px; } .ce-faq .ce-faq__a { padding: 0 14px 15px; } .ce-faq .ce-faq__section-title { font-size: 19px; } .ce-faq .ce-faq__toc { padding: 15px 16px; } .ce-faq .ce-faq__toc-list { grid-template-columns: 1fr; gap: 2px; } .ce-faq .ce-faq__section { scroll-margin-top: 80px; } /* The band's padding lives on its inner element now, not on the band itself. */ .ce-faq .ce-faq__hero-in { padding-block: 1.9rem 2rem; } .ce-faq .ce-faq__hero-sub { font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .ce-faq .ce-faq__item, .ce-faq .ce-faq__ico, .ce-faq .ce-faq__mark::before, .ce-faq .ce-faq__mark::after { transition: none; } } /* ⚠ PRINT MATTERS HERE. Licensees print the package instructions to work through them, and a
prints collapsed — the page comes out as a list of questions with no answers. */ @media print { .ce-faq .ce-faq__toc { display: none; } /* ⚠ UN-BLEED IT FOR PAPER. The band is now `.ce-brand-hero`, which breaks out of its container with `width: 100vw` and negative side margins — on a sheet that reaches past the printable area and drags the heading with it. Width and margins have to come back, not just the colours. */ .ce-faq .ce-faq__hero { width: auto; margin-left: 0; margin-right: 0; min-height: 0; background: none; color: #000; box-shadow: none; } .ce-faq .ce-faq__hero-in { padding: 0; } .ce-faq .ce-faq__hero-title, .ce-faq .ce-faq__hero-sub { color: #000; } .ce-faq .ce-faq__hero-badge { display: none; } .ce-faq .ce-faq__item { break-inside: avoid; border-color: #ccc; box-shadow: none; } .ce-faq .ce-faq__item > .ce-faq__a { display: block !important; } .ce-faq .ce-faq__mark { display: none; } } /* ⚠ THE TOKENS, DECLARED AGAIN FOR THIS PAGE — AND THIS WAS A LIVE BUG, NOT TIDYING. Everything above scopes its custom properties to `.ce-faq`, the accordion wrapper. There is no `.ce-faq` on /how-it-works/, so every `var( --ce-ink )`, `var( --ce-body )`, `var( --ce-brand-soft )` and `var( --ce-brand-line )` in the rules below was invalid at computed-value time and the whole declaration was dropped. The page still LOOKED right — Astra's inherited ink is a near-enough blue-black and the surfaces behind were white anyway — which is why four screenshots missed it. What it actually broke was the hover state of the "View package" button: `background: var( --ce-ink )` resolved to nothing, so the button turned transparent under the cursor and its white label vanished. Found 2026-11-02 by resolving the cascade for each button rather than by looking at it. */ body.ce-hiw { --ce-ink: #0e2747; --ce-body: #33415c; --ce-brand-soft: #e6f1fb; --ce-brand-line: #cfdcec; } /* =========================================================================== /how-it-works/ — the rebuilt narrative ({@see CEASAP\Faq\How_It_Works}) ⚠ THE OLD SECTIONS ARE HIDDEN, NOT DELETED. Nothing is written to `_elementor_data`; the authored page is intact underneath and switching the FAQ feature off restores it whole. Measured on production 2026-11-03, the page's eight top-level sections were: 1 "How it Works..." + intro + video 609px REPLACED by the band 2 "Have questions? We've got answers" 4813px REPLACED, 2026-11-03 — the nine answers and their videos are READ off this section and redrawn ({@see How_It_Works::qa()}), so the uploads stay the page's, not the code's. 3 "Did you know ... 36 hours in a week" 1791px REPLACED (and the claim was not true: the daily cap is 3 self-paced courses) 4 "CE packages that just make sense" 733px REPLACED 5 package contents, 3 Hrs. of ... 894px REPLACED 6 "36-Hr ceBUILDER Bundle" $189/$119 1781px REPLACED (and "Bundle" is against a standing rule — it is a Package) 7 "Want First Dibs and Free Stuff" 554px KEPT — a working Gravity Form 8 "Need Additional Assistance ?" 616px KEPT ⚠ TARGETED BY POSITION, NOT BY ELEMENTOR ID, for the reason ce-brand.css gives: an id like `elementor-element-629be82e` is generated and differs between staging and production. The cost of position is that re-ordering the page in Elementor re-points these — if a replaced section reappears, or a kept one vanishes, this list is the first place to look. */ /* ⚠ SCOPED TO `.entry-content`, AND THAT IS NOT COSMETIC. `.elementor` matches EVERY Elementor root on the document, including `.elementor-location-header` — so the first version of this rule hid the site header's first container along with the page's, and the nav collapsed to zero height. Caught on staging 2026-11-03 by measuring the header, not by looking at the page: the screenshot was scrolled past it and looked fine. The page's own root is the one inside `.entry-content`; the header and footer roots are siblings of it, elsewhere in the document. */ /* The first six, which is now every section we replace; 7 and 8 are the two Gravity Forms. */ body.ce-hiw .entry-content > .elementor > .e-con:nth-child(-n+6) { display: none; } .ce-hiw__h2 { margin: 0 0 1.4rem; font-size: clamp( 22px, 2.4vw, 30px ); font-weight: 800; color: var( --ce-ink ); text-align: center; } .ce-hiw__steps { background: #fff; } .ce-hiw__steps, .ce-hiw__pkgs { max-width: 1100px; margin-inline: auto; padding-inline: 16px; padding-block: 2.6rem 0; } /* ── the three steps: a journey on a rail ──────────────────────────────────────────────────── Scott, 2026-11-03: "the steps design need a lot of work." It was three identical bordered boxes with a small pale number chip — which says "here are three things", not "do this, then this, then this". The box is gone entirely. What carries the section now is a connector rail with the three numbers sitting on it as nodes, so the eye reads left to right in order. That also keeps the page's three sections on three different surfaces: steps are typographic on a rail, packages are elevated image cards, the answers are flat image tiles. Repeating one card treatment down the whole page is what flattened it. */ .ce-hiw__steplist { --ce-step-gap: 28px; --ce-step-node: 62px; position: relative; display: grid; /* ⚠ EXACTLY THREE, NOT `auto-fit`. The rail below is positioned from the column count, so a track count that changes with the viewport would leave the line starting mid-air. */ grid-template-columns: repeat( 3, 1fr ); gap: var( --ce-step-gap ); margin: 0; padding: 0; list-style: none; } /* The rail, drawn once, from the centre of the first node to the centre of the last. With three equal tracks and two gaps, a track is ( 100% - 2g ) / 3, so half of one — the inset that lands on a node's centre — is ( 100% - 2g ) / 6. */ .ce-hiw__steplist::before { content: ''; position: absolute; top: calc( var( --ce-step-node ) / 2 - 1px ); left: calc( ( 100% - 2 * var( --ce-step-gap ) ) / 6 ); right: calc( ( 100% - 2 * var( --ce-step-gap ) ) / 6 ); height: 2px; border-radius: 2px; background: linear-gradient( 90deg, var( --ce-brand-line ), var( --ce-brand ), var( --ce-brand-line ) ); } .ce-hiw__step { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; text-align: center; } /* ⚠ THE WHITE RING IS WHAT MAKES IT A NODE. The rail runs behind every number; an 8px white spread shadow punches it back out either side, so the line reads as passing between the circles rather than through them. It depends on the section being white — which the rule below states outright rather than inheriting and hoping. */ .ce-hiw__stepn { position: relative; z-index: 1; display: grid; place-items: center; width: var( --ce-step-node ); height: var( --ce-step-node ); margin: 0 0 18px; border-radius: 999px; background: var( --ce-brand-gradient ); color: #fff; font-size: 24px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 8px #fff, 0 6px 18px rgba( 4, 107, 210, .26 ); } .ce-hiw__steph { margin: 0 0 .5rem; font-size: 19px; font-weight: 700; line-height: 1.35; color: var( --ce-ink ); text-wrap: balance; } .ce-hiw__stepb { max-width: 34ch; margin: 0 0 1rem; font-size: 15px; line-height: 1.65; color: var( --ce-body ); } /* `margin-top: auto` pins the three links to one baseline however long the bodies run. */ .ce-hiw__steplink { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; font-size: 14.5px; font-weight: 700; color: var( --ce-brand ); text-decoration: none; } .ce-hiw__steplink::after { content: '\2192'; transition: transform .18s ease; } /* ⚠ BOTH HALVES ON HOVER, ALWAYS. Astra styles bare elements; a rule that sets only one of colour/background gets the other from the theme, which is what made the catalogue's labels vanish into their own backgrounds. {@see assets/catalog/catalog-v2.css} */ .ce-hiw__steplink:hover { color: var( --ce-brand-deep ); text-decoration: none; } .ce-hiw__steplink:hover::after { transform: translateX( 4px ); } /* Stacked, the horizontal rail has nothing to span, so each step grows its own connector down through the gap — a fixed height, because the gap is a fixed height. */ @media ( max-width: 820px ) { .ce-hiw__steplist { --ce-step-gap: 34px; grid-template-columns: 1fr; } .ce-hiw__steplist::before { display: none; } .ce-hiw__step:not( :last-child )::after { content: ''; position: absolute; top: 100%; left: 50%; width: 2px; height: var( --ce-step-gap ); transform: translateX( -1px ); background: var( --ce-brand-line ); } } @media ( prefers-reduced-motion: reduce ) { .ce-hiw__steplink::after { transition: none; } .ce-hiw__steplink:hover::after { transform: none; } } /* ── the packages: image-led merchandise cards ─────────────────────────────────────────────── A tinted band separates this section from the steps above without a rule or a heading change. */ .ce-hiw__pkgs { margin-top: 3rem; padding-block: 2.8rem 3rem; background: linear-gradient( 180deg, var( --ce-brand-soft ) 0%, rgba( 230, 241, 251, 0 ) 100% ); } .ce-hiw__pkglist { display: grid; grid-template-columns: repeat( auto-fit, minmax( 250px, 1fr ) ); gap: 22px; max-width: 1100px; margin: 0 auto; padding: 0; list-style: none; } .ce-hiw__pkg { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var( --ce-brand-line ); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba( 14, 39, 71, .06 ), 0 8px 24px rgba( 14, 39, 71, .06 ); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .ce-hiw__pkg:hover { transform: translateY( -3px ); border-color: rgba( 28, 111, 181, .34 ); box-shadow: 0 2px 4px rgba( 14, 39, 71, .08 ), 0 16px 34px rgba( 14, 39, 71, .12 ); } /* ⚠ A FIXED RATIO, NOT THE IMAGE'S OWN HEIGHT. The three artworks are 300x188 today, but a card grid where one package is re-shot at a different size steps out of line for everybody. The frame decides the shape; the picture fills it. */ .ce-hiw__pkgfig { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var( --ce-brand-soft ); line-height: 0; } .ce-hiw__pkgimg { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .ce-hiw__pkg:hover .ce-hiw__pkgimg { transform: scale( 1.03 ); } /* The body grows, so the button sits on the same line across every card however long a name is. */ .ce-hiw__pkgbody { display: flex; flex: 1 1 auto; flex-direction: column; padding: 20px 20px 22px; } /* ⚠ TWO LINES RESERVED, SO THE PRICES SIT ON ONE LINE. "36-Hour Broker or Broker-Salesperson CE Package" wraps and the other two do not, which dropped that card's price and button a line below its neighbours'. Reserving the taller of the two heights costs nothing and is what makes the row read as one row. */ .ce-hiw__pkgname { min-height: calc( 2 * 1.35em ); margin: 0 0 .45rem; font-size: 17px; font-weight: 700; line-height: 1.35; } .ce-hiw__pkgname a { color: var( --ce-ink ); text-decoration: none; } .ce-hiw__pkgname a:hover { color: var( --ce-brand ); text-decoration: underline; } .ce-hiw__pkgprice { margin: 0 0 1.1rem; font-size: 26px; font-weight: 800; line-height: 1.1; color: var( --ce-ink ); font-variant-numeric: tabular-nums; } /* ⚠ A BUTTON, AND BOTH HALVES DECLARED. This is an , so Astra's `a:hover` would supply a colour over our brand background and the label would disappear — the catalogue bug, one element over. */ .ce-hiw__pkgcta { margin-top: auto; display: block; padding: 11px 16px; border: 1px solid var( --ce-brand ); border-radius: 10px; background: var( --ce-brand ); color: #fff; font-size: 15px; font-weight: 700; text-align: center; text-decoration: none; transition: background .18s ease, color .18s ease, border-color .18s ease; } .ce-hiw__pkgcta:hover, .ce-hiw__pkgcta:focus-visible { background: var( --ce-ink ); border-color: var( --ce-ink ); color: #fff; text-decoration: none; } .ce-hiw__pkgnote { max-width: 1100px; margin: 1.8rem auto 0; padding-inline: 16px; font-size: 15px; line-height: 1.6; color: var( --ce-body ); text-align: center; } .ce-hiw__pkgnote a { color: var( --ce-brand ); font-weight: 700; text-decoration: none; } .ce-hiw__pkgnote a:hover { color: var( --ce-ink ); text-decoration: underline; } /* A card with no artwork keeps the grid honest rather than collapsing shorter than its neighbours. */ .ce-hiw__pkg.is-imageless .ce-hiw__pkgbody { padding-top: 26px; } @media ( prefers-reduced-motion: reduce ) { .ce-hiw__pkg, .ce-hiw__pkgimg { transition: none; } .ce-hiw__pkg:hover { transform: none; } .ce-hiw__pkg:hover .ce-hiw__pkgimg { transform: none; } } /* ── the video answers ─────────────────────────────────────────────────────────────────────────── THREE SECTIONS, THREE SURFACES. The steps are bordered white boxes, the packages are elevated cards on a tinted band, and these are flat tiles on plain white whose only object is the still. Stacking one card treatment down the whole page is what made the old page read as a list of twenty equivalent boxes. */ .ce-hiw__qa { padding-block: 3.2rem 3.4rem; background: #fff; } .ce-hiw__qain { max-width: 1100px; margin: 0 auto; padding-inline: 16px; } .ce-hiw__qalist { display: grid; grid-template-columns: repeat( auto-fit, minmax( 270px, 1fr ) ); gap: 28px 24px; margin: 0; padding: 0; list-style: none; } /* No border, no shadow, no fill. The tile is its picture and its two paragraphs. */ .ce-hiw__qacard { min-width: 0; } /* ⚠ A FIXED 16/9 FRAME, NOT THE STILL'S OWN SHAPE. The nine posters are separate uploads and are not all the same size; left to themselves the questions sat on nine different baselines. */ .ce-hiw__qaplay { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 14px; background: var( --ce-brand-soft ); cursor: pointer; line-height: 0; -webkit-appearance: none; appearance: none; } .ce-hiw__qaplay.is-static { cursor: default; } /* ⚠ ASTRA OWNS BARE `button:hover` — `{ color: #fff; background-color: var(--ast-global-color-1) }`. The tile is a