/* JSON Article Styles */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&family=Lato:wght@300;400;700;900&display=swap');

.ja { line-height: 1.7; color: #1A1C1B; font-family: 'Lato', Arial, sans-serif; }
.ja h2 { font-family: 'Oswald', sans-serif; font-size: 40px; font-weight: 700; margin: 32px 0 12px; color: #000000; text-transform: uppercase; }
.ja h3 { font-family: 'Oswald', sans-serif; font-size: 24px; font-weight: 700; margin: 0 0 8px; color: #000000; text-transform: uppercase; }
.ja h4 { font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: 600; margin: 0 0 6px; color: #1A5C36; }
.ja p { margin: 0 0 var(--ja-rt-para-gap, 14px); font-size: 15px; color: #444846; line-height: 1.7; }
.ja img { max-width: 100%; height: auto; }
.ja ul { margin: 8px 0 16px 20px; padding: 0; }
/* li colour resolves --ja-text so a block/item Text colour (which emits a
   local --ja-text alongside `color`) recolours list items too — a bare
   hardcoded colour here beats the inherited wrapper colour and made the
   Style tab's Text control appear dead for lists. */
.ja ul li { margin-bottom: 4px; font-size: 15px; color: var(--ja-text, #444846); }


/* ======================================================
   BUYING GUIDE LAYOUT — mirrors Webflow .sayu-ig styles
   ====================================================== */

/* Outer wrapper: constrain width like Webflow div-block */
.ja-bg-wrap {
    width: 1300px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Hero banner — matches .div-block-2 */
.ja-bg-hero {
    position: relative;
    /* Box aspect tracks Banner.webp (1300×750 = 13:7.5 ≈ 1.733). With
       `cover` this means the image fills the box pixel-perfect at every
       viewport — no right-side cropping and no empty bands above/below.
       Editors can override `background-size` / `background-position` per
       article via the hero block's `hero_image_size` /
       `hero_image_position` fields. */
    aspect-ratio: 1300 / 750;
    background: #0b1627;
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding-top: 0;
}
.ja-bg-hero-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; align-items: flex-start;
    justify-content: flex-start;
}
/* Hero text positioning — driven by the block's title_align / title_valign
   fields. Without these the overlay sits at top-left (which is what the
   original Webflow .div-block-2 / .hh1 combo produces). */
.ja-bg-hero-align-left   .ja-bg-hero-overlay { justify-content: flex-start; }
.ja-bg-hero-align-center .ja-bg-hero-overlay { justify-content: center; }
.ja-bg-hero-align-right  .ja-bg-hero-overlay { justify-content: flex-end; }
.ja-bg-hero-align-left   .ja-bg-hero-title   { text-align: left; }
.ja-bg-hero-align-center .ja-bg-hero-title   { text-align: center; }
.ja-bg-hero-align-right  .ja-bg-hero-title   { text-align: right; }
.ja-bg-hero-valign-top    .ja-bg-hero-overlay { align-items: flex-start; }
.ja-bg-hero-valign-middle .ja-bg-hero-overlay { align-items: center; }
.ja-bg-hero-valign-bottom .ja-bg-hero-overlay { align-items: flex-end; }
.ja-bg-hero-accent { display: inline; }
/* No tint applied on top of the hero image — the original Webflow article
   uses Banner.webp directly with the dark area baked into the asset. A
   gradient overlay was previously dimming the red transition triangle at
   the bottom of the hero, so we leave the overlay container transparent
   and rely on the image alone for contrast behind the title. */
.ja-bg-hero-content {
    padding: 0;
    max-width: 1000px;
}
/* Title — matches the original Webflow `.hh1` rule:
     font: Oswald 200, 80px / 106px, uppercase, -1px tracking, 60px padding.
   Earlier we ran 56px to keep things on four lines, but the original is
   significantly larger; the hero is 750px tall so 80px / 106px line height
   still fits the four lines comfortably. */
.ja-bg-hero-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 200;
    font-size: 90px;
    line-height: 110px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin: 0 0 0 0;
    padding: 60px 0 40px 60px;
}
/* CTA button — matches .topbtn */
.ja-bg-hero-cta {
    display: block;
    width: 400px;
    padding: 15px 0;
    margin-left: 60px;
    background: #2182ba;
    color: #fff;
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center;
    line-height: 26px;
    transition: filter 0.2s;
}
.ja-bg-hero-cta:hover { filter: brightness(120%); color: #fff; text-decoration: none; }

/* Force typography inheritance through block-level style wrappers.
   When the editor's Style panel sets font-family / font-size /
   font-weight / colour at block level, the inline style sits on the
   wrapper — but per-element rules in this stylesheet (e.g. on
   .ja-bg-table-caption, .ja-bg-advice-heading, .ja-bg-accordion-summary)
   take precedence over inheritance because they apply directly to the
   element. Setting `inherit` on descendants of a tagged wrapper
   restores the cascade, so the user's chosen font/size/weight/colour
   actually shows up. Per-element overrides still win because inline
   styles on the element itself beat any class-selector rule. */
.ja-block-style.has-ff * { font-family: inherit; }
.ja-block-style.has-fs * { font-size: inherit; }
.ja-block-style.has-lh * { line-height: inherit; }
.ja-block-style.has-fw * { font-weight: inherit; }
.ja-block-style.has-fg * { color: inherit; }
/* Layout-tab Align: the CTA button wrapper centres itself with a direct
   text-align rule, which would beat the alignment inherited from the
   block / canvas-item wrapper — force it back to inherit when the
   author set an explicit Align. */
.ja-block-style.has-ta .ja-bg-cta-block,
.ja-canvas-item.has-ta .ja-bg-cta-block { text-align: inherit; }

/* Content block (intro + advice) — matches .div-block-3 */
.ja-bg-content-block {
    background-color: #f7f7f7;
    border-top: 0 solid #ff5119;
    border-bottom: 0 solid #ff5119;
    padding-bottom: 60px;
}
/* Intro paragraphs — matches .maintxt.blck */
.ja-bg-content-block > p {
    color: #202020;
    text-align: left;
    margin-bottom: 0;
    padding: 60px 60px 0;
    font-family: 'Lato', sans-serif;
    font-size: 17px;
    line-height: 32px;
}
.ja-bg-content-block > p + p {
    padding-top: 20px;
}
/* Advice headings — matches .hh3 (h3 qualifier for specificity vs .ja h3) */
h3.ja-bg-advice-heading {
    color: #202020;
    text-align: left;
    letter-spacing: -1px;
    text-transform: uppercase;
    margin-top: 40px;
    margin-bottom: 0;
    padding: 0 60px;
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 40px;
}
/* Advice body text — matches .maintxt.blck.tp (p qualifier for specificity vs .ja p) */
p.ja-bg-advice-p {
    color: #202020;
    text-align: left;
    margin-bottom: 0;
    padding: 20px 60px;
    font-family: 'Lato', sans-serif;
    font-size: 17px;
    line-height: 32px;
}
/* Feature list — matches .quick-stack-2 icon rows */
.ja-bg-feature-list {
    padding: 0 60px;
    margin-bottom: 20px;
}
div.ja-bg-feature-item {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}
div.ja-bg-feature-icon {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    width: 70px;
}
div.ja-bg-feature-icon img {
    display: block;
    width: 70px !important;
    max-width: 70px !important;
    height: auto !important;
}
div.ja-bg-feature-text {
    -webkit-flex: 1;
    flex: 1;
    font-family: 'Lato', sans-serif;
    font-size: 17px;
    line-height: 27px;
    color: #000;
}
span.ja-bg-feature-name {
    color: #2182ba;
    font-weight: 700;
}
.ja-bg-advice-img { margin: 16px 60px; }
.ja-bg-advice-img img { max-width: 100%; border-radius: 0; }

/* Comparison table — matches the original Webflow article style:
   dark frame around the table, bright orange header, alternating
   white / soft peach rows. */
.ja-bg-comparison-wrap {
    /* No horizontal inset by default so the table (and its dark frame) spans
       the full content width. Keep the bottom gap. Editors can re-introduce
       side gutters per block via the Style panel. */
    padding: 0 0 60px;
}
.ja-bg-comparison-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #0F0F0F;
    padding: 24px;
    border-radius: 4px;
}
/* Plain variant — used by the generic Table block. Strips the branded
   comparison_table chrome (dark frame, scroll padding, horizontal wrap
   padding, and the content-block's grey bg + 60px tail padding) so the
   user's own block-level border / background / padding from the Style
   panel is what visibly surrounds the table. */
.ja-bg-content-block--plain-table {
    background-color: transparent;
    padding-bottom: 0;
}
/* Bare list: drop the grey panel + tail padding so a list reads as inline
   article content, matching the rest of the surrounding prose. */
.ja-bg-content-block--list {
    background-color: transparent;
    padding-bottom: 0;
}
.ja-bg-comparison-wrap--plain {
    padding: 0;
}
.ja-bg-comparison-scroll--plain {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}
table.ja-bg-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Lato', sans-serif;
    /* A converted article sets these from its own stylesheet so its table
       keeps the row rhythm it had; everything else falls back to ours. */
    font-size: var(--ja-ct-td-fs, 14px);
    line-height: var(--ja-ct-td-lh, 20px);
    color: #1a1a1a;
    text-align: left;
}
table.ja-bg-comparison-table thead th {
    background-color: var(--ja-ct-th-bg, #FF5119);
    color: var(--ja-ct-th-fg, #fff);
    font-size: 14px;
    font-weight: 700;
    /* Same override as the body cells: a converted table sets its source's
       own cell padding, and leaving the header out made the header row
       4px shorter than the original's. */
    padding: var(--ja-ct-td-pad, 18px 22px);
    text-align: left;
    letter-spacing: 0.2px;
    border: 0;
}
table.ja-bg-comparison-table thead th:first-child {
    background-color: var(--ja-ct-th-bg, #FF5119);
}
table.ja-bg-comparison-table tbody th {
    text-align: left;
    font-weight: 700;
    padding: var(--ja-ct-td-pad, 18px 22px);
    font-size: var(--ja-ct-td-fs, 14px);
    line-height: var(--ja-ct-td-lh, 20px);
    /* Converted tables pin their column widths, and a non-wrapping label
       column then overflows instead of wrapping the way the source does. */
    white-space: var(--ja-ct-th-ws, nowrap);
    color: var(--ja-ct-td-fg, #1a1a1a);
}
table.ja-bg-comparison-table tbody td {
    padding: var(--ja-ct-td-pad, 18px 22px);
    text-align: left;
    vertical-align: middle;
    color: var(--ja-ct-td-fg, #1a1a1a);
}
table.ja-bg-comparison-table tr.ja-bg-ct-even td,
table.ja-bg-comparison-table tr.ja-bg-ct-even th {
    background-color: var(--ja-ct-row-a-bg, #fff);
}
table.ja-bg-comparison-table tr.ja-bg-ct-odd td,
table.ja-bg-comparison-table tr.ja-bg-ct-odd th {
    background-color: var(--ja-ct-row-b-bg, #FCEEE5);
}
img.ja-bg-ct-icon {
    width: var(--ja-ct-icon-w, 18px);
    height: auto;
    display: block;
    margin: 0 auto;
}
/* Image cell — an uploaded picture sitting inside a table cell. Caps the
   width to the cell and centres it; height tracks aspect ratio. */
img.ja-bg-ct-cell-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
/* List cell — a bullet/numbered list inside a table cell. Resets the
   standalone list block's large left margin so the bullets sit naturally
   within the cell, and inherits the cell's colour / typography. */
table.ja-bg-comparison-table .ja-bg-ct-cell-list {
    margin: 0;
    padding-left: 20px;
    text-align: left;
    line-height: 1.6;
}
table.ja-bg-comparison-table .ja-bg-ct-cell-list li { margin: 0 0 8px; }
table.ja-bg-comparison-table .ja-bg-ct-cell-list li:last-child { margin-bottom: 0; }
/* A cell holding a list reads better top-aligned than vertically centred. */
table.ja-bg-comparison-table td:has(> .ja-bg-ct-cell-list),
table.ja-bg-comparison-table th:has(> .ja-bg-ct-cell-list) { vertical-align: top; }

/* Image + Text combo cell. A flex container holding an uploaded image and a
   caption; `--<layout>` sets the image's position relative to the text and
   `--align-<x>` sets the content alignment. */
.ja-bg-ct-cell-it { display: flex; gap: 8px; }
.ja-bg-ct-cell-it--top,
.ja-bg-ct-cell-it--bottom { flex-direction: column; }
.ja-bg-ct-cell-it--left,
.ja-bg-ct-cell-it--right  { flex-direction: row; align-items: center; }
/* Column layouts: alignment controls both horizontal placement + text-align. */
.ja-bg-ct-cell-it--top.ja-bg-ct-cell-it--align-left,
.ja-bg-ct-cell-it--bottom.ja-bg-ct-cell-it--align-left   { align-items: flex-start; text-align: left; }
.ja-bg-ct-cell-it--top.ja-bg-ct-cell-it--align-center,
.ja-bg-ct-cell-it--bottom.ja-bg-ct-cell-it--align-center { align-items: center; text-align: center; }
.ja-bg-ct-cell-it--top.ja-bg-ct-cell-it--align-right,
.ja-bg-ct-cell-it--bottom.ja-bg-ct-cell-it--align-right  { align-items: flex-end; text-align: right; }
/* Row layouts: alignment controls text-align only (vertical stays centred). */
.ja-bg-ct-cell-it--left.ja-bg-ct-cell-it--align-left,
.ja-bg-ct-cell-it--right.ja-bg-ct-cell-it--align-left    { text-align: left; }
.ja-bg-ct-cell-it--left.ja-bg-ct-cell-it--align-center,
.ja-bg-ct-cell-it--right.ja-bg-ct-cell-it--align-center  { text-align: center; }
.ja-bg-ct-cell-it--left.ja-bg-ct-cell-it--align-right,
.ja-bg-ct-cell-it--right.ja-bg-ct-cell-it--align-right   { text-align: right; }
.ja-bg-ct-cell-it .ja-bg-ct-cell-img { max-width: 100%; height: auto; }
.ja-bg-ct-cell-it-text { display: block; line-height: 1.5; }
/* A cell holding the combo reads best top-aligned. */
table.ja-bg-comparison-table td:has(> .ja-bg-ct-cell-it),
table.ja-bg-comparison-table th:has(> .ja-bg-ct-cell-it) { vertical-align: top; }

/* Star-rating cell. Two stacked layers of identical star glyphs: a grey
   base and a gold fill clipped to the score's width %, so any fraction
   renders crisply. Both layers share the same font-size / glyph string so
   the overlay aligns exactly. */
.ja-bg-ct-rating { display: inline-flex; align-items: center; gap: 6px; }
.ja-bg-ct-rating-stars {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    line-height: 1;
    font-size: 18px;
    letter-spacing: 1px;
}
.ja-bg-ct-rating-base { color: #d8d8d8; }
.ja-bg-ct-rating-fill {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    color: #f5a623;
}
.ja-bg-ct-rating-value { font-size: .8em; font-weight: 600; color: inherit; }
.ja-bg-ct-rating-text { font-size: .8em; color: inherit; }
table.ja-bg-comparison-table a {
    color: #c63d12;
    text-decoration: underline;
    font-size: 13px;
}

/* Generic tables — any <table> the author drops into a Text or custom-HTML
   block. The branded comparison/specs tables already declare width:100% at
   higher specificity (table.ja-bg-...), so this only affects un-classed
   tables, which otherwise shrink to their content. .ja-bg-wrap exists only
   for JSON (editor) articles, so legacy raw-HTML pages are untouched. */
.ja-bg-wrap table {
    width: 100%;
}

/* ======================================================
   THEMED SECTION WRAPPER — recreates the alternating dark
   ("div-block-9") / light ("div-block-10") Webflow sections.
   Multiple consecutive blocks (heading, banner, intro, table,
   alternative cards) live inside one continuous wrapper so the
   section reads as a single dark group.
   ====================================================== */
.ja-bg-themed-section {
    margin: 0;
    padding: 40px 0 60px;
}
.ja-bg-themed-section-dark {
    background-color: #1a1e23;
    color: #fff;
}
.ja-bg-themed-section-light {
    background-color: #f5f5f5;
}
/* A converted band: it brings its own colour, padding and measure from the
   source article, so it takes neither of the two themes and none of their
   chrome. This rule only hands the band's text colour down to the blocks
   inside it — a block that states its own colour still wins, on specificity. */
.ja-bg-themed-section.ja-bg-themed-section-fg * { color: inherit; }
/* …and nothing inside a converted band paints a panel of its own. The
   content block's #f7f7f7 card is our chrome, not the source's: inside a
   dark band it put a light panel under copy the band had just turned
   white, which reads as white on white. A block that carries a real
   background from its source still sets it inline and still wins. */
.ja-bg-themed-section-plain .ja-bg-content-block { background-color: transparent; }

/* Inside a dark section, headings / paragraphs / list bullets all switch to
   white. We keep our specificity reasonable (one class + one tag) so that
   block-specific overrides further down still win. */
.ja-bg-themed-section-dark h2,
.ja-bg-themed-section-dark h3,
.ja-bg-themed-section-dark h4,
.ja-bg-themed-section-dark p,
.ja-bg-themed-section-dark li {
    color: #fff;
}
.ja-bg-themed-section-dark .ja-bg-heading-block { color: #fff; }
.ja-bg-themed-section-dark p { color: #e6e6e6; }
/* Bullet/numbered lists inside a dark section: the global `.ja ul li`
   rule (specificity 0,1,2) at the top of this file otherwise wins over
   the looser `.ja-bg-themed-section-dark li` rule above and forces the
   text back to dark grey. Bump specificity so dark sections stay legible. */
.ja-bg-themed-section-dark .ja-bg-list,
.ja-bg-themed-section-dark .ja-bg-list li,
.ja-bg-themed-section-dark ul li,
.ja-bg-themed-section-dark ol li { color: #fff; }
.ja-bg-themed-section-dark a { color: #fff; text-decoration: underline; }
.ja-bg-themed-section-dark a:hover { text-decoration: none; }

/* Inside a dark section the comparison table no longer needs its own dark
   frame — the section already provides one. Drop the extra padding/bg so it
   reads as part of the surrounding wrapper. */
.ja-bg-themed-section-dark .ja-bg-content-block {
    background-color: transparent;
}
.ja-bg-themed-section-dark .ja-bg-comparison-wrap {
    padding: 16px 60px 40px;
    background-color: transparent;
}
.ja-bg-themed-section-dark .ja-bg-comparison-scroll {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

/* Model / product cards inside a dark section take a compact look that
   matches the original Webflow article: small round product image on the
   left, white heading + body copy on the right, no alternating layouts, no
   per-card background fills, no divider stripes between cards. */
.ja-bg-themed-section-dark .ja-bg-product,
.ja-bg-themed-section-dark .ja-bg-product-dark-bg,
.ja-bg-themed-section-dark .ja-bg-product-light-bg {
    background-color: transparent;
    width: auto;
    margin: 0;
    padding: 0 60px;
}
/* Model name sits above the card body and lines up with where the body
   copy starts (i.e. left-edge of the text column, not centred), matching
   the original Webflow article. The padding-left equals the image column
   width + grid gap so the title flows directly above the description. */
.ja-bg-themed-section-dark .ja-bg-product .ja-bg-product-name,
.ja-bg-themed-section-dark .ja-bg-product-light-bg .ja-bg-product-name,
.ja-bg-themed-section-dark .ja-bg-product-dark-bg .ja-bg-product-name {
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    padding: 24px 0 12px 264px;
    line-height: 28px;
}
/* Force a single image-left / text-right layout for every card inside a
   dark themed section — even the ones the renderer marks as "reversed" — so
   the rhythm matches the original's repeating pattern. We use explicit
   grid-column placement here because the renderer emits text-before-image
   in the DOM for reversed cards, and the default auto-placement would
   otherwise put the image on the right. */
.ja-bg-themed-section-dark .ja-bg-product-grid,
.ja-bg-themed-section-dark .ja-bg-product-grid-rev {
    grid-template-columns: 224px 1fr;
    grid-column-gap: 40px;
    grid-row-gap: 0;
    margin: 0;
    padding: 0 0 32px;
    align-items: center;
}
.ja-bg-themed-section-dark .ja-bg-product-grid .ja-bg-product-img,
.ja-bg-themed-section-dark .ja-bg-product-grid-rev .ja-bg-product-img {
    grid-column: 1;
    grid-row: 1;
}
.ja-bg-themed-section-dark .ja-bg-product-grid .ja-bg-product-text,
.ja-bg-themed-section-dark .ja-bg-product-grid-rev .ja-bg-product-text {
    grid-column: 2;
    grid-row: 1;
}
.ja-bg-themed-section-dark .ja-bg-product-img {
    align-items: center;
    justify-content: center;
}
.ja-bg-themed-section-dark .ja-bg-product-img img {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 50%;
    background-color: #ffffff;
}
.ja-bg-themed-section-dark .ja-bg-product-text {
    align-items: flex-start;
}
.ja-bg-themed-section-dark .ja-bg-product-text p,
.ja-bg-themed-section-dark .ja-bg-product-text,
.ja-bg-themed-section-dark .ja-bg-product-light-bg .ja-bg-product-text p,
.ja-bg-themed-section-dark .ja-bg-product-dark-bg .ja-bg-product-text p {
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    line-height: 22px;
    margin: 0 0 8px;
    padding: 0;
}
.ja-bg-themed-section-dark .ja-bg-model-sub {
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 4px;
    padding: 0;
}
.ja-bg-themed-section-dark .ja-bg-model-sub + .ja-bg-product-text-p,
.ja-bg-themed-section-dark .ja-bg-model-sub + p { margin-top: 0; }
.ja-bg-themed-section-dark .ja-bg-who-for {
    color: #fff;
}
.ja-bg-themed-section-dark .ja-bg-product-text a,
.ja-bg-themed-section-dark .ja-bg-product-light-bg .ja-bg-product-text a,
.ja-bg-themed-section-dark .ja-bg-product-dark-bg .ja-bg-product-text a {
    color: #fff;
    text-decoration: underline;
}
/* Hide the divider stripe rendered between successive cards — the dark
   section already provides a continuous backdrop. */
.ja-bg-themed-section-dark .ja-bg-divider {
    display: none;
}

/* Headings inside the dark section follow the Webflow .hh2.whte / .hh3.whte
   look — uppercase, big, white. */
.ja-bg-themed-section-dark h2.ja-bg-heading-block {
    font-family: 'Oswald', sans-serif;
    font-size: 40px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 50px;
    color: #fff;
    margin: 0;
    padding: 40px 60px 20px;
}
.ja-bg-themed-section-dark h3.ja-bg-heading-block {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    margin: 0;
    padding: 16px 60px 10px;
}

/* Banner image, intro text and free-form text blocks inside a dark section
   keep the section's horizontal padding so everything aligns vertically.
   We strip the max-width caps that .ja-bg-image-wide / -narrow apply
   globally so the banner spans the same width as the comparison table /
   model card column inside the dark wrapper. */
.ja-bg-themed-section-dark .ja-bg-image-block,
.ja-bg-themed-section-dark .ja-bg-image-block.ja-bg-image-wide,
.ja-bg-themed-section-dark .ja-bg-image-block.ja-bg-image-narrow,
.ja-bg-themed-section-dark .ja-bg-image-block.ja-bg-image-full {
    margin: 0;
    padding: 0 60px 16px;
    max-width: none !important;
    text-align: center;
}
.ja-bg-themed-section-dark .ja-bg-image-block img {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
.ja-bg-themed-section-dark .ja-bg-text-block,
.ja-bg-themed-section-dark .ja-bg-alternative {
    padding: 8px 60px 16px;
}
.ja-bg-themed-section-dark .ja-bg-text-block p,
.ja-bg-themed-section-dark .ja-bg-alternative p {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: 28px;
    color: #e6e6e6;
}
.ja-bg-themed-section-dark .ja-bg-alternative-name {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    color: #fff;
    font-size: 22px;
    margin: 0 0 8px;
    letter-spacing: 0.3px;
}

/* Tablet / mobile padding adjustments for the dark wrapper. */
@media (max-width: 991px) {
    .ja-bg-themed-section { padding: 32px 0 40px; }
    .ja-bg-themed-section-dark h2.ja-bg-heading-block { font-size: 32px; line-height: 40px; padding: 30px 40px 16px; }
    .ja-bg-themed-section-dark h3.ja-bg-heading-block { font-size: 20px; padding: 12px 40px 8px; }
    .ja-bg-themed-section-dark .ja-bg-image-block,
    .ja-bg-themed-section-dark .ja-bg-image-wide,
    .ja-bg-themed-section-dark .ja-bg-image-full,
    .ja-bg-themed-section-dark .ja-bg-image-narrow { padding: 0 40px 12px; }
    .ja-bg-themed-section-dark .ja-bg-text-block,
    .ja-bg-themed-section-dark .ja-bg-alternative { padding: 8px 40px 12px; }
    .ja-bg-themed-section-dark .ja-bg-comparison-wrap { padding: 12px 40px 32px; }
    /* Tablet card scaling — slightly narrower image column so the title's
       padding-left still reaches the body-copy column. */
    .ja-bg-themed-section-dark .ja-bg-product { padding: 0 40px; }
    .ja-bg-themed-section-dark .ja-bg-product-grid,
    .ja-bg-themed-section-dark .ja-bg-product-grid-rev {
        grid-template-columns: 180px 1fr; grid-column-gap: 28px;
    }
    .ja-bg-themed-section-dark .ja-bg-product-img img { width: 180px; height: 180px; }
    .ja-bg-themed-section-dark .ja-bg-product .ja-bg-product-name,
    .ja-bg-themed-section-dark .ja-bg-product-light-bg .ja-bg-product-name,
    .ja-bg-themed-section-dark .ja-bg-product-dark-bg .ja-bg-product-name { padding-left: 208px; }
}
@media (max-width: 767px) {
    .ja-bg-themed-section { padding: 24px 0 32px; }
    .ja-bg-themed-section-dark h2.ja-bg-heading-block { font-size: 26px; line-height: 32px; padding: 24px 30px 12px; }
    .ja-bg-themed-section-dark h3.ja-bg-heading-block { font-size: 18px; padding: 10px 30px 6px; }
    .ja-bg-themed-section-dark .ja-bg-image-block,
    .ja-bg-themed-section-dark .ja-bg-image-wide,
    .ja-bg-themed-section-dark .ja-bg-image-full,
    .ja-bg-themed-section-dark .ja-bg-image-narrow { padding: 0 0 12px; }
    .ja-bg-themed-section-dark .ja-bg-text-block,
    .ja-bg-themed-section-dark .ja-bg-alternative { padding: 8px 30px 12px; }
    .ja-bg-themed-section-dark .ja-bg-comparison-wrap { padding: 12px 0 24px; }
    /* Mobile cards — stack image above text and centre the title to keep it
       readable on narrow screens (a hard left-padded title would push off
       the viewport). */
    .ja-bg-themed-section-dark .ja-bg-product { padding: 0 30px; }
    .ja-bg-themed-section-dark .ja-bg-product-grid,
    .ja-bg-themed-section-dark .ja-bg-product-grid-rev {
        grid-template-columns: 1fr; grid-row-gap: 16px;
    }
    .ja-bg-themed-section-dark .ja-bg-product-grid .ja-bg-product-img,
    .ja-bg-themed-section-dark .ja-bg-product-grid-rev .ja-bg-product-img { grid-column: 1; grid-row: 1; }
    .ja-bg-themed-section-dark .ja-bg-product-grid .ja-bg-product-text,
    .ja-bg-themed-section-dark .ja-bg-product-grid-rev .ja-bg-product-text { grid-column: 1; grid-row: 2; }
    .ja-bg-themed-section-dark .ja-bg-product-img img { width: 160px; height: 160px; margin: 0 auto; }
    .ja-bg-themed-section-dark .ja-bg-product .ja-bg-product-name,
    .ja-bg-themed-section-dark .ja-bg-product-light-bg .ja-bg-product-name,
    .ja-bg-themed-section-dark .ja-bg-product-dark-bg .ja-bg-product-name {
        padding: 16px 0 8px;
        text-align: center;
    }
}

/* Product sections — matches .div-block-9 / .div-block-10 */
.ja-bg-product {
    width: 1300px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    border-top: none;
}
.ja-bg-product-dark-bg {
    background-color: #0b1627;
}
.ja-bg-product-light-bg {
    background-color: #f7f7f7;
}

/* Divider stripe images */
.ja-bg-divider {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
}

/* Product name — matches .hh2 (h2 qualifier for specificity vs .ja h2) */
h2.ja-bg-product-name {
    font-family: 'Oswald', sans-serif;
    font-size: 40px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 50px;
    margin: 0;
    padding: 60px 90px;
    text-align: center;
}
.ja-bg-product-dark-bg .ja-bg-product-name {
    color: #ffffff;
}
.ja-bg-product-light-bg .ja-bg-product-name {
    color: #000000;
    line-height: 50px;
}

/* Product grid — matches .quick-stack-3 with .75fr 1fr columns */
.ja-bg-product-grid {
    display: grid;
    grid-template-columns: .75fr 1fr;
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    margin-left: 60px;
    margin-right: 60px;
    padding: 0 0 60px;
}
.ja-bg-product-grid-rev {
    grid-template-columns: 1fr .75fr;
}

.ja-bg-product-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.ja-bg-product-img img {
    width: 100%;
    height: auto;
    border-radius: 0;
}
.ja-bg-product-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
/* Product text — matches .maintxt.col (dark) and .maintxt.blck.col (light) */
.ja-bg-product-text p {
    font-family: 'Lato', sans-serif;
    font-size: 17px;
    line-height: 32px;
    margin-bottom: 0;
    padding: 0;
}
.ja-bg-product-dark-bg .ja-bg-product-text p {
    color: #ffffff;
}
.ja-bg-product-light-bg .ja-bg-product-text p {
    color: #202020;
}
/* Inline body links inherit text color but stay underlined for affordance. */
.ja-bg-product-dark-bg .ja-bg-product-text a {
    color: inherit;
    text-decoration: underline;
}
.ja-bg-product-light-bg .ja-bg-product-text a {
    color: inherit;
    text-decoration: underline;
}
.ja-bg-product-dark-bg .ja-bg-product-text a:hover,
.ja-bg-product-light-bg .ja-bg-product-text a:hover {
    text-decoration: none;
}

/* Inline links inside a JSON article body (intro, buying advice, tech advice
   etc.) take the colour of the body text they sit in (white on a dark block,
   dark on a light block) — only the underline marks them as links. Using
   `inherit` rather than a fixed colour keeps a link legible whatever
   background/text colour the editor sets on its containing block. */
.ja-bg-wrap p a,
.ja-bg-section p a,
.ja-bg-buying-advice p a,
.ja-bg-intro p a {
    color: inherit;
    text-decoration: underline;
}
.ja-bg-wrap p a:hover {
    text-decoration: none;
}
/* Bullet list links inherit the same colour treatment. */
.ja-bg-wrap ul.ja-bg-list li a {
    color: inherit;
    text-decoration: underline;
}
/* CTA buttons opt out of the global underline (they have their own style).
   Comparison-table links keep their underline so they read as proper links
   inside the data cells, matching the original Webflow theme. */
.ja-bg-wrap p a.ja-bg-cta,
.ja-bg-wrap p a.ja-cta,
.ja-bg-wrap p a.ja-bg-hero-cta {
    text-decoration: none;
}

.ja-bg-who-for {
    font-size: 14px;
    font-style: italic;
    color: #999;
    margin-bottom: 10px;
    padding-bottom: 8px;
}
.ja-bg-features strong {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ja-bg-product-dark-bg .ja-bg-features strong { color: #5cb883; }
.ja-bg-product-light-bg .ja-bg-features strong { color: #27864F; }
.ja-bg-features ul { margin: 6px 0 12px 20px; }
.ja-bg-product-dark-bg .ja-bg-features ul li { color: #d0d0d0; }
.ja-bg-product-light-bg .ja-bg-features ul li { color: #202020; }
.ja-bg-price {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 600;
    margin: 12px 0;
}
.ja-bg-product-dark-bg .ja-bg-price { color: #fff; }
.ja-bg-product-light-bg .ja-bg-price { color: #1a1a1a; }
.ja-bg-cta {
    display: inline-block;
    padding: 12px 30px;
    background: #2182ba;
    color: #fff;
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: filter 0.2s;
    margin-top: 12px;
}
.ja-bg-cta:hover { filter: brightness(120%); color: #fff; text-decoration: none; }

/* Comparison */
.ja-bg-comparison {
    padding: 30px 60px;
    background: #f7f7f7;
    width: 1300px;
    max-width: 100%;
    margin: 0 auto;
}

/* FAQ */
.ja-bg-faq {
    padding: 40px 60px;
    background: #f7f7f7;
    width: 1300px;
    max-width: 100%;
    margin: 0 auto;
}
.ja-bg-faq-item {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ddd;
}
.ja-bg-faq-item:last-child { border-bottom: none; }
.ja-bg-faq-item h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #202020;
    margin-bottom: 6px;
}

/* Responsive — matches Webflow breakpoints */
@media (max-width: 991px) {
    .ja-bg-wrap { width: auto; max-width: none; }
    .ja-bg-hero { padding-top: 0; background-position: left center; }
    .ja-bg-hero-title { text-align: left; letter-spacing: 0; margin-top: 0; padding: 40px 0 30px 40px; font-size: 54px; font-weight: 200; line-height: 64px; }
    .ja-bg-hero-content { padding: 0; }
    .ja-bg-hero-cta { width: 300px; margin-left: 40px; }
    .ja-bg-content-block { padding-bottom: 40px; }
    .ja-bg-content-block > p { padding: 40px 40px 0; font-size: 17px; line-height: 28px; }
    .ja-bg-content-block > p + p { padding-top: 15px; }
    h3.ja-bg-advice-heading { letter-spacing: -0.5px; margin-top: 30px; padding: 0 40px; font-size: 32px; line-height: 42px; }
    p.ja-bg-advice-p { padding: 15px 40px; font-size: 17px; line-height: 28px; }
    .ja-bg-feature-list { padding: 0 40px; }
    .ja-bg-feature-icon img { width: 60px; }
    .ja-bg-feature-item { grid-template-columns: 60px 1fr; }
    .ja-bg-feature-text { font-size: 17px; line-height: 28px; }
    .ja-bg-product { width: auto; max-width: none; }
    h2.ja-bg-product-name { letter-spacing: -0.5px; padding: 40px; font-size: 36px; line-height: 42px; }
    .ja-bg-product-grid { grid-column-gap: 40px; grid-row-gap: 40px; margin-left: 40px; margin-right: 40px; padding-bottom: 40px; }
    .ja-bg-product-text p { font-size: 17px; line-height: 28px; }
    .ja-bg-comparison-wrap { padding: 0 0 40px; }
    .ja-bg-comparison-scroll { padding: 16px; }
    /* Plain variant (generic Table block): keep it chrome-less at every
       breakpoint — the rules above would otherwise re-introduce padding
       on tablet that the desktop --plain rules removed. */
    .ja-bg-comparison-wrap--plain { padding: 0; }
    .ja-bg-comparison-scroll--plain { padding: 0; }
    table.ja-bg-comparison-table thead th { font-size: 15px; line-height: 20px; padding: 16px 14px; }
    table.ja-bg-comparison-table { font-size: 14px; line-height: 20px; }
    table.ja-bg-comparison-table tbody th { font-size: 15px; line-height: 20px; padding: 16px 14px; }
    table.ja-bg-comparison-table tbody td { padding: 16px 14px; }
}
@media (max-width: 767px) {
    .ja-bg-hero { padding-top: 0; background-position: left center; }
    .ja-bg-hero-title { margin-top: 0; padding: 30px 30px 20px; font-size: 42px; line-height: 54px; font-weight: 200; }
    .ja-bg-hero-cta { width: 280px; margin-left: 30px; }
    .ja-bg-content-block > p { padding: 30px 30px 0; font-size: 16px; line-height: 26px; }
    h3.ja-bg-advice-heading { margin-top: 25px; padding: 0 30px; font-size: 26px; line-height: 34px; }
    p.ja-bg-advice-p { padding: 10px 30px; font-size: 16px; line-height: 26px; }
    .ja-bg-feature-list { padding: 0 30px; }
    .ja-bg-feature-icon img { width: 60px; }
    .ja-bg-feature-item { grid-template-columns: 60px 1fr; }
    .ja-bg-feature-text { font-size: 16px; line-height: 26px; }
    h2.ja-bg-product-name { padding: 30px; font-size: 32px; line-height: 38px; }
    .ja-bg-product-grid,
    .ja-bg-product-grid-rev { grid-template-columns: 1fr; }
    .ja-bg-product-grid-rev .ja-bg-product-img { order: -9999; }
    .ja-bg-product-text p { font-size: 16px; line-height: 26px; }
    .ja-bg-comparison-wrap { padding: 0 0 40px; }
    .ja-bg-comparison-scroll { padding: 12px; }
    /* Plain variant stays chrome-less on mobile too (see tablet note). */
    .ja-bg-comparison-wrap--plain { padding: 0; }
    .ja-bg-comparison-scroll--plain { padding: 0; }
    table.ja-bg-comparison-table thead th { font-size: 14px; padding: 14px 12px; }
    table.ja-bg-comparison-table { font-size: 13px; line-height: 18px; }
    table.ja-bg-comparison-table tbody th { font-size: 14px; line-height: 18px; padding: 14px 12px; }
    table.ja-bg-comparison-table tbody td { padding: 14px 12px; }
    img.ja-bg-ct-icon { width: 16px; }
}
@media (max-width: 479px) {
    .ja-bg-hero { padding-top: 0; background-position: left center; }
    .ja-bg-hero-title { text-align: left; margin-top: 0; padding: 20px 20px 10px; font-size: 28px; line-height: 38px; font-weight: 300; }
    .ja-bg-hero-content { padding-top: 0; }
    .ja-bg-hero-cta { width: 197px; margin-left: 20px; padding: 10px; font-size: 13px; line-height: 18px; text-align: left; }
    .ja-bg-content-block { padding-bottom: 25px; }
    .ja-bg-content-block > p { padding: 20px 20px 0; font-size: 15px; line-height: 24px; }
    h3.ja-bg-advice-heading { letter-spacing: 0; margin-top: 20px; padding: 0 20px; font-size: 20px; line-height: 28px; }
    p.ja-bg-advice-p { padding: 8px 20px; font-size: 15px; line-height: 24px; }
    .ja-bg-feature-list { padding: 0 20px; }
    .ja-bg-feature-icon img { width: 50px; }
    .ja-bg-feature-item { grid-template-columns: 50px 1fr; grid-column-gap: 10px; margin-bottom: 15px; }
    .ja-bg-feature-text { font-size: 15px; line-height: 24px; }
    h2.ja-bg-product-name { text-align: left; letter-spacing: 0; padding: 20px; font-size: 26px; line-height: 34px; }
    .ja-bg-product-grid { grid-column-gap: 20px; grid-row-gap: 20px; margin-left: 20px; margin-right: 20px; padding-bottom: 20px; }
    .ja-bg-product-text p { font-size: 15px; line-height: 24px; }
    .ja-bg-product-img img { max-width: 270px; }
    .ja-bg-comparison-wrap { padding: 0 0 20px; }
    .ja-bg-comparison-scroll { overflow-x: scroll; }
    /* Plain variant stays chrome-less on small phones too. */
    .ja-bg-comparison-wrap--plain { padding: 0; }
    table.ja-bg-comparison-table { min-width: 600px; }
}

/* ======================================================
   GENERIC STYLES (other layouts)
   ====================================================== */

/* Hero */
.ja-hero { margin-bottom: 28px; }
.ja-hero-img { margin-bottom: 16px; }
.ja-hero-img img { width: 100%; border-radius: 10px; }
.ja-hero-text { max-width: 720px; }
.ja-badge {
    display: inline-block; font-size: 12px; font-weight: 600;
    letter-spacing: 0.5px; text-transform: uppercase;
    color: #1F7043; background: #D4EDDD; border-radius: 4px;
    padding: 3px 10px; margin-bottom: 12px;
}
.ja-meta { font-size: 13px; color: #787C7A; margin-top: 8px; }

/* Summary / Verdict box */
.ja-summary-box {
    background: #EEF7F1; border: 1px solid #A3D9B5; border-radius: 10px;
    padding: 20px 24px; margin: 24px 0;
}
.ja-summary-box h3 { color: #0C2E1A; font-size: 18px; margin-bottom: 10px; }
.ja-who-for { font-size: 14px; color: #444846; margin-bottom: 8px; }
.ja-verdict-line { font-size: 15px; color: #14472A; margin-top: 10px; }
.ja-features strong { font-size: 13px; color: #1A5C36; text-transform: uppercase; letter-spacing: 0.5px; }

/* Product cards */
.ja-products { margin: 24px 0; }
.ja-product-card {
    display: flex; gap: 24px; padding: 24px;
    border: 1px solid #DEE0DF; border-radius: 10px;
    margin-bottom: 16px; background: #fff;
}
.ja-product-img { flex: 0 0 200px; }
.ja-product-img img { width: 100%; border-radius: 6px; }
.ja-product-body { flex: 1; }
.ja-price { font-size: 20px; font-weight: 700; color: #0C2E1A; margin: 12px 0; }

/* CTA button */
.ja-cta {
    display: inline-block; padding: 10px 24px;
    background: #27864F; color: #fff; text-decoration: none;
    border-radius: 6px; font-weight: 600; font-size: 14px;
    transition: background 0.2s;
}
.ja-cta:hover { background: #1F7043; color: #fff; text-decoration: none; }

/* Tech section */
.ja-tech-section { margin: 28px 0; }
.ja-tech-item { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid #EEEFEE; }
.ja-tech-item:last-child { border-bottom: none; }
.ja-tech-img { margin: 12px 0; }
.ja-tech-img img { max-width: 500px; }

/* Models */
.ja-models { margin: 28px 0; }
.ja-model-card {
    display: flex; gap: 20px; margin-bottom: 20px; padding: 20px;
    border: 1px solid #DEE0DF; border-radius: 10px; background: #F7F8F7;
}
.ja-model-img { flex: 0 0 180px; }
.ja-model-img img { width: 100%; border-radius: 6px; }
.ja-model-body { flex: 1; }
.ja-perf-notes { background: #EEF7F1; border-radius: 6px; padding: 12px 16px; margin-top: 10px; }

/* Competitors */
.ja-competitors { margin: 28px 0; }
.ja-competitor-item { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #EEEFEE; }

/* List items (listicle) */
.ja-list-items { margin: 24px 0; }
.ja-list-item { display: flex; gap: 20px; margin-bottom: 28px; align-items: flex-start; }
.ja-list-num {
    flex: 0 0 48px; height: 48px; border-radius: 50%;
    background: #D4EDDD; color: #0C2E1A;
    font-size: 20px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.ja-list-body { flex: 1; }
.ja-list-img { margin: 10px 0; }
.ja-list-img img { max-width: 400px; }
.ja-key-benefit {
    background: #EEF7F1; border-radius: 6px;
    padding: 8px 14px; margin-top: 8px; font-size: 14px;
}

/* Tips */
.ja-tips {
    background: #F7F8F7; border: 1px solid #DEE0DF;
    border-radius: 10px; padding: 20px 24px; margin: 24px 0;
}

/* Pull quote */
.ja-pullquote {
    border-left: 4px solid #27864F; margin: 28px 0; padding: 16px 24px;
    background: #F7F8F7; border-radius: 0 8px 8px 0;
}
.ja-pullquote p { font-size: 18px; font-style: italic; color: #14472A; margin-bottom: 8px; }
.ja-pullquote cite { font-size: 13px; color: #787C7A; font-style: normal; }

/* Body sections (editorial) */
.ja-body-section { margin-bottom: 24px; }
.ja-section-img { margin: 14px 0; }

/* CTA footer */
.ja-cta-footer { margin: 32px 0; text-align: center; }

/* Final verdict */
.ja-final-verdict { margin: 32px 0; padding: 24px; background: #EEF7F1; border-radius: 10px; }

/* Design section */
.ja-design { margin: 28px 0; }
.ja-design-img { margin: 14px 0; }

/* Performance */
.ja-performance { margin: 28px 0; }
.ja-stats { background: #F7F8F7; border-radius: 6px; padding: 16px; margin-top: 12px; }

/* Specs */
.ja-specs { margin: 28px 0; }

/* Alternatives */
.ja-alternatives { margin: 28px 0; }
.ja-alt-item { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #EEEFEE; }

/* Responsive - other layouts */
@media (max-width: 680px) {
    .ja-product-card { flex-direction: column; }
    .ja-product-img { flex: none; }
    .ja-model-card { flex-direction: column; }
    .ja-model-img { flex: none; }
    .ja-list-item { flex-direction: column; }
    .ja-list-num { width: 40px; height: 40px; font-size: 16px; }
}

/* ======================================================
   Generic content blocks (Text, Heading, Image, Quote,
   CTA, Divider) — used in the new ordered-blocks model
   ====================================================== */

/* Wrap generic content blocks at the same width as the buying-guide chrome */
.ja-bg-wrap > .ja-bg-section,
.ja-bg-wrap > figure.ja-bg-image-block,
.ja-bg-wrap > .ja-bg-cta-block,
.ja-bg-wrap > h2.ja-bg-heading-block,
.ja-bg-wrap > h3.ja-bg-heading-block,
.ja-bg-wrap > h4.ja-bg-heading-block,
.ja-bg-wrap > hr.ja-bg-divider-block {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* Converted blocks set their own measure via the padding carried over from
   the source article; the 1100px cap plus that padding would narrow the text
   column and re-wrap every paragraph. Scoped to the marker class so nothing
   hand-built in the Builder changes. */
.ja-block-fullmeasure > .ja-bg-section,
.ja-block-fullmeasure > figure.ja-bg-image-block,
.ja-block-fullmeasure > .ja-bg-content-block {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Trailing gap under a converted block's last paragraph, from the source's
   own margin. Defaults to our 14px, so nothing else moves. */
.ja-bg-rich-text > p:last-child,
.ja-bg-rich-text > ul:last-child,
.ja-bg-rich-text > ol:last-child { margin-bottom: var(--ja-rt-para-tail, 14px); }

.ja-bg-text-block { padding-top: 12px; padding-bottom: 12px; }
.ja-bg-text-block p { font-size: 16px; color: #2C3540; line-height: 1.75; }
.ja-bg-text-block p a { color: #0a66c2; text-decoration: underline; }
.ja-bg-text-block p a:hover { text-decoration: none; }

/* Bulleted lists rendered from text blocks (e.g. Pros / Cons / summary
   lists in range reviews). Padding mirrors the surrounding p text. */
.ja-bg-list { font-size: 16px; color: var(--ja-text, #2C3540); line-height: 1.75; }
/* `.ja ul` sets its own margin at higher specificity than `.ja-bg-list`, so
   the box has to be declared at the same weight or a converted list ignores
   the margins and indent carried over from its source. */
.ja-bg-list,
.ja ul.ja-bg-list,
.ja ol.ja-bg-list { margin: var(--ja-bg-list-margin, 8px 0 8px 24px); padding: var(--ja-bg-list-pad, 0 0 0 8px); }
.ja-bg-list li,
.ja ul.ja-bg-list li,
.ja ol.ja-bg-list li { margin: var(--ja-bg-list-item-margin, 4px 0); padding: var(--ja-bg-list-item-pad, 0); }
.ja-bg-list li a { color: #0a66c2; text-decoration: underline; }
.ja-bg-list li a:hover { text-decoration: none; }

.ja-bg-heading-block { font-family: 'Oswald', sans-serif; color: #0C2E1A; padding: 18px 20px 6px; }
.ja-bg-heading-h1 { font-size: 56px; font-weight: 700; color: #000000; text-transform: uppercase; margin: 32px auto 10px; line-height: 1.05; }
.ja-bg-heading-h2 { font-size: 40px; font-weight: 700; color: #000000; text-transform: uppercase; margin: 24px auto 8px; }
.ja-bg-heading-h3 { font-size: 24px; font-weight: 700; color: #000000; text-transform: uppercase; margin: 20px auto 6px; }
.ja-bg-heading-h4 { font-size: 17px; font-weight: 600; margin: 16px auto 4px; }

.ja-bg-image-block { margin: 24px auto; padding: 0 20px; text-align: center; }
.ja-bg-image-block img { width: 100%; height: auto; border-radius: 8px; }
.ja-bg-image-block figcaption { font-size: 13px; color: #5f6b76; margin-top: 8px; font-style: italic; }
.ja-bg-image-narrow { max-width: 700px !important; }
.ja-bg-image-wide   { max-width: 1100px !important; }
.ja-bg-image-full   { max-width: none !important; padding: 0; }
/* `.ja-bg-wrap > figure.ja-bg-image-block` re-adds 20px of side padding at
   higher specificity, which stops a full-width image actually filling the
   column (a converted picture came out 1260px inside a 1300px column). */
.ja-bg-wrap > figure.ja-bg-image-block.ja-bg-image-full { padding-left: 0; padding-right: 0; }
/* Custom W×H — figure drops its width cap so the image's explicit
   inline width takes effect. Inline style on the <img> beats the
   .ja-bg-image-block img { width: 100% } rule (inline > class).
   max-width:100% keeps the image from overflowing the figure when the
   viewport is narrower than the chosen width (lock-ratio on: aspect
   stays correct; lock-ratio off: minor distortion possible at very
   narrow viewports — acceptable trade for not overflowing). */
.ja-bg-image-custom { max-width: none !important; }
.ja-bg-image-custom img { width: auto; max-width: 100%; }
/* Decorative band: a full-bleed horizontal strip (e.g. the Webflow
   Divider1/Divider2 green-triangle separators that bracket each dark
   section). Strips all the figure's margin / padding / max-width / radius
   so the image meets the section's edges, and overrides the dark-section
   padding that the themed-section wrapper would otherwise impose. */
.ja-bg-image-band {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}
.ja-bg-image-band img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
.ja-bg-themed-section-dark .ja-bg-image-band,
.ja-bg-themed-section-light .ja-bg-image-band {
    padding: 0 !important;
    margin: 0 !important;
}
/* A band placed as the first/last child of a themed section should sit
   flush with the section's coloured edge rather than floating inside the
   section's outer 40px/60px padding (which would leave an awkward gap
   between the divider and the band of colour above/below it). The
   negative margins match the wrapper's own padding for each breakpoint. */
.ja-bg-themed-section > .ja-bg-image-band:first-child { margin-top: -40px !important; }
.ja-bg-themed-section > .ja-bg-image-band:last-child  { margin-bottom: -60px !important; }
@media (max-width: 991px) {
    .ja-bg-themed-section > .ja-bg-image-band:first-child { margin-top: -32px !important; }
    .ja-bg-themed-section > .ja-bg-image-band:last-child  { margin-bottom: -40px !important; }
}
@media (max-width: 767px) {
    .ja-bg-themed-section > .ja-bg-image-band:first-child { margin-top: -24px !important; }
    .ja-bg-themed-section > .ja-bg-image-band:last-child  { margin-bottom: -32px !important; }
}

.ja-bg-quote-block {
    /* bg + left "marker" read from custom props so the Quote block's
       "Whole block" style can recolour them (renderer sets the vars). */
    border-left: var(--ja-q-mw, 4px) solid var(--ja-q-mc, #27864F);
    /* Fully flush by default: no vertical margin and (below) no padding. Was
       28px auto. Quotes get spacing only when explicitly set / from a parent. */
    margin: 0 auto;
    /* Default inner padding when none is set: 20px vertical / 40px horizontal.
       Explicit Style-tab padding (inline padding-* longhands) still overrides
       per-side. The old top-level content-gutter no longer pads quotes, so this
       is now the single source of a quote's breathing room. */
    padding: 20px 40px;
    background: var(--ja-q-bg, #F7F8F7);
    border-radius: 0 8px 8px 0;
    max-width: 1060px;
}
/* Full-width quote: the box spans the full article width (drops the max-width
   cap + the auto-centring / side indent from the shared top-level block rule),
   but KEEPS its inner text padding so the text isn't jammed against the edges.
   The border-left marker + 28px vertical margin stay. */
.ja-bg-quote-block,
.ja-bg-wrap > blockquote.ja-bg-quote-block {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
.ja-bg-quote-block p { font-size: 19px; font-style: normal; color: #14472A; margin-bottom: 6px; }
.ja-bg-quote-block cite { font-size: 13px; color: #787C7A; font-style: normal; }

/* No default vertical margin (requested 2026-06): spacing around buttons
   is controlled by the surrounding container / Style panel instead. */
.ja-bg-cta-block { text-align: center; margin: 0 auto; }
.ja-bg-cta-btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 6px;
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
/* Corners quick-control (cta_button block). Declared after .ja-bg-cta-btn
   so equal-specificity ties resolve here; a per-element border-radius from
   the Style panel renders inline and still wins over both. */
.ja-bg-cta-btn-square { border-radius: 0; }
.ja-bg-cta-btn-pill { border-radius: 999px; }
.ja-bg-cta-btn-primary { background: #27864F; color: #fff; border: 2px solid #27864F; }
.ja-bg-cta-btn-primary:hover { background: #1a5f3a; border-color: #1a5f3a; color: #fff; }
.ja-bg-cta-btn-secondary { background: transparent; color: #27864F; border: 2px solid #27864F; }
.ja-bg-cta-btn-secondary:hover { background: #27864F; color: #fff; }

.ja-bg-divider-block {
    border: 0;
    border-top: 1px solid #DEE0DF;
    margin: 28px auto;
    height: 0;
}

/* Author Quote — round avatar beside a peach speech bubble with the quote
   and a bold attribution linking to the author profile. */
.ja-bg-author-quote {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 30px 0;
}
.ja-bg-aq-avatar { flex: 0 0 auto; }
.ja-bg-aq-avatar-img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.ja-bg-aq-bubble {
    flex: 1 1 auto;
    background: #F9DBCF;
    border-radius: 18px;
    padding: 20px 28px;
    /* Text colour lives on the bubble (not the <p>) so a colour set on the
       "Quote bubble" Style element cascades to the quote + attribution. */
    color: #2A2A2A;
}
.ja-bg-aq-text {
    margin: 0;
    line-height: 1.6;
    font-size: 16px;
    color: inherit;
}
.ja-bg-aq-author { color: inherit; text-decoration: none; }
.ja-bg-aq-author:hover { text-decoration: underline; }
@media (max-width: 575px) {
    .ja-bg-author-quote { gap: 14px; }
    .ja-bg-aq-avatar-img { width: 60px; height: 60px; }
    .ja-bg-aq-bubble { padding: 14px 18px; }
    .ja-bg-aq-text { font-size: 15px; }
}

.ja-bg-faq-item {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 12px 20px;
}

/* ======================================================
   Cross-layout content blocks (body section, list items,
   verdict box, tech section, model card, alternative,
   specs). Reuse the buying-guide visual vocabulary so
   articles stay coherent across layouts.
   ====================================================== */

.ja-bg-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 20px;
}
/* When the block has a Style-panel override (`.ja-block-style` wrapper),
   the user's own padding is on that wrapper — zero out the inner
   section's default padding so the user's value is what actually shows.
   Without this, padding=0 from the Style panel still left ~18px and
   padding=30px ended up adding to the section's 18/20 default. */
.ja-block-style .ja-bg-rich-text,
.ja-block-style .ja-bg-text-block {
    padding: 0;
}

/* Body section */
.ja-bg-body-heading { margin-top: 0; }
.ja-bg-body-figure { margin: 0 0 16px; }
.ja-bg-body-figure img { width: 100%; border-radius: 6px; }

/* List items (Listicle / How-To) */
.ja-bg-list-item { border-top: 1px solid #DEE0DF; }
.ja-bg-list-item:first-of-type { border-top: 0; }
.ja-bg-list-item-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 12px;
}
.ja-bg-list-item-num {
    flex: 0 0 auto;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 38px;
    color: #27864F;
    line-height: 1;
    min-width: 44px;
}
.ja-bg-list-item-title {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #0C2E1A;
    margin: 0;
}
.ja-bg-list-item-figure { margin: 8px 0 16px; }
.ja-bg-list-item-figure img { width: 100%; border-radius: 6px; }
.ja-bg-list-item-video {
    position: relative;
    width: 100%;
    margin: 8px 0 16px;
    padding-top: 56.25%; /* 16:9 */
    background: #000;
    border-radius: 6px;
    overflow: hidden;
}
.ja-bg-list-item-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.ja-bg-list-item-benefit {
    background: #F2F7F4;
    border-left: 3px solid #27864F;
    padding: 10px 14px;
    margin: 12px 0 0;
    color: #14472A;
}

/* Verdict / summary box */
.ja-bg-verdict-box {
    background: #F2F7F4;
    border: 1px solid #C8DACE;
    border-radius: 8px;
    padding: 22px 26px;
    margin: 24px auto;
    max-width: 1100px;
}
.ja-bg-verdict-title {
    margin: 0 0 10px;
    color: #14472A;
}
.ja-bg-verdict-who { margin: 0 0 8px; }
.ja-bg-verdict-strengths { margin: 8px 0 12px; }
.ja-bg-verdict-strengths strong {
    display: block;
    font-family: 'Oswald', sans-serif;
    color: #0C2E1A;
    margin-bottom: 4px;
}
.ja-bg-verdict-line {
    margin: 8px 0 0;
    font-style: italic;
    color: #14472A;
    font-size: 16px;
}

/* Technology deep-dive section */
.ja-bg-tech-section { padding-top: 28px; padding-bottom: 28px; }
.ja-bg-tech-heading { margin-top: 0; }
.ja-bg-tech-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}
.ja-bg-tech-grid-rev .ja-bg-tech-img { order: 2; }
.ja-bg-tech-img img { width: 100%; border-radius: 6px; }
@media (max-width: 760px) {
    .ja-bg-tech-grid { grid-template-columns: 1fr; }
    .ja-bg-tech-grid-rev .ja-bg-tech-img { order: 0; }
}

/* Model card — reuses .ja-bg-product-* visual vocabulary */
.ja-bg-model-sub {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    margin: 14px 0 4px;
    color: #14472A;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Alternative / competitor */
.ja-bg-alternative { border-left: 3px solid #DEE0DF; }
.ja-bg-alternative-name { margin: 0 0 6px; color: #0C2E1A; }

/* Specs & CTA */
.ja-bg-specs-block {
    background: #FAFBFA;
    border: 1px solid #E5E7E6;
    border-radius: 8px;
    padding: 22px 26px;
    margin: 24px auto;
    max-width: 1100px;
}
.ja-bg-specs-title { margin: 0 0 10px; color: #14472A; }
.ja-bg-specs-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 14px;
}
.ja-bg-specs-table th,
.ja-bg-specs-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #E5E7E6;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
}
.ja-bg-specs-table th {
    width: 38%;
    font-family: 'Oswald', sans-serif;
    color: #0C2E1A;
    font-weight: 600;
}
.ja-bg-specs-price { margin: 6px 0 12px; font-weight: 700; font-size: 18px; }

/* Accordion / expandable options. Uses native <details>/<summary>
   so JS isn't required. The chevron is a CSS triangle that flips on
   open via the [open] attribute selector. */
/* Expandable options (accordion) — styled to mirror the Webflow FAQ
   blocks: each option is a standalone box with a 1px border, square
   corners and 20px padding, separated by 20px of vertical space (no
   outer "card" wrapper). Colours are driven by CSS custom properties so
   (a) the editor's per-element Style targets (item / summary / body) can
   override border, background and text, and (b) the accordion auto-flips
   to white-on-transparent inside a dark themed section — matching the
   source page, which sits on a dark background. Defaults below are the
   dark-on-light values used on a normal (light) article page. */
.ja-bg-accordion {
    --ja-acc-border: #1a1e23;
    --ja-acc-fg: #1a1e23;
    --ja-acc-bg: transparent;
    /* Full content width — no max-width cap, so the option boxes line up
       with the surrounding blocks instead of floating in a centred,
       padded-looking column. Authors can narrow per block via the Style
       panel if wanted. */
    margin: 24px 0;
}
/* No card wrapper any more, so drop the .ja-bg-content-block grey panel +
   tail padding. The combined-class selector beats the responsive
   single-class rules by specificity so it also covers mobile. */
.ja-bg-content-block.ja-bg-accordion {
    padding-bottom: 0;
    background-color: transparent;
}
.ja-bg-accordion-caption {
    margin: 0 0 20px;
    padding: 0;
    color: var(--ja-acc-fg);
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.ja-bg-accordion-item {
    border: 1px solid var(--ja-acc-border);
    border-radius: 0;
    background: var(--ja-acc-bg);
    margin-bottom: 20px;
    overflow: hidden;
}
.ja-bg-accordion-item:last-child { margin-bottom: 0; }
.ja-bg-accordion-summary {
    list-style: none;
    cursor: pointer;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 16px;
    line-height: 30px;
    font-weight: 600;
    color: var(--ja-acc-fg);
}
.ja-bg-accordion-summary::-webkit-details-marker { display: none; }
.ja-bg-accordion-title { flex: 1; min-width: 0; }
.ja-bg-accordion-chev {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: currentColor;
    margin-top: 3px;
    transition: transform 0.2s;
    flex: 0 0 auto;
}
.ja-bg-accordion-item[open] .ja-bg-accordion-chev { transform: rotate(180deg); margin-top: -3px; }
.ja-bg-accordion-body {
    padding: 0 20px 20px;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 16px;
    line-height: 30px;
    color: var(--ja-acc-fg);
}
.ja-bg-accordion-body p { margin: 0 0 10px; }
.ja-bg-accordion-body p:last-child { margin-bottom: 0; }
/* Answer paragraphs follow the accordion's contextual colour. Without
   this, the global `.ja p { color:#444846 }` targets the <p> directly
   and beats the colour set on .ja-bg-accordion-body, so answers stay
   dark inside dark sections / dark canvases. Inheriting keeps every
   layer working: the dark flip (--ja-acc-fg), Setup-tab faq_answer
   overrides and per-block body styles all land on the body div and
   flow down. The article-defaults generator re-asserts the same rule
   id-scoped (see _ja_extract_defaults_css). */
.ja-bg-accordion-body p { color: inherit; }
/* On a dark themed section, mirror the source page: white border + white
   text. Authors can still override per-element via the Style panel.
   .ja-canvas-dark is the same flip for canvases whose own bg_color is a
   dark hex (tagged by the renderer / editor), so an accordion dropped on
   a dark canvas reads as the Webflow FAQs do — white boxes straight on
   the dark background, no white panel behind them. */
.ja-bg-themed-section-dark .ja-bg-accordion,
.ja-canvas-dark .ja-bg-accordion {
    --ja-acc-border: #fff;
    --ja-acc-fg: #fff;
}

/* Section navigation — matches the Webflow .navbar > .dropdown pattern
   on the original site: full-width blue toggle bar; the link panel
   appears on hover (or keyboard focus) and OVERLAYS the next block via
   absolute positioning, so it doesn't push content down. Colours come
   from the Webflow CSS export (.sayu-ig .navbar / .dropdown-list.w--open). */
.ja-bg-section-nav {
    position: -webkit-sticky;
    position: sticky;
    top: var(--ja-sticky-top, 0px);
    /* No bottom margin — the nav bar sits flush above the content (was 24px,
       which read as an unwanted gap under the bar). Horizontal auto-margins
       keep it centred; the top margin only shows on a non-sticky in-flow nav. */
    margin: 24px auto 0;
    max-width: 1300px;
    background-color: #2282be;
    color: #fff;
    border: 0;
    padding: 0;
    z-index: 50;
}
/* When the nav is wrapped (block style / anchor / responsive), the sticky
   positioning lives on the wrapper instead — see .ja-block-sticky below.
   The wrapper is a direct child of .article-item-full-description, so it
   has the full article height to travel within; the inner element must
   then sit in normal flow so it doesn't try (and fail) to stick inside a
   wrapper that's only as tall as itself. */
.ja-block-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: var(--ja-sticky-top, 0px);
    z-index: 50;
}
/* The site header (.header-wrapper) is itself sticky on desktop (>=1025px):
   a shrinking header that scrolls its top ~116px away and leaves a ~49px
   category-menu bar pinned at the viewport top with z-index 1000. Without an
   offset the article's sticky nav pins at top:0 and hides behind that bar.
   Park it just below instead. Below 1025px the site header is position:
   relative (not sticky), so no offset — the nav sticks flush to the top.
   The preview page sets its own `top` (banner height) and so is unaffected. */
@media (min-width: 1025px) {
    .ja { --ja-sticky-top: 49px; }
}
.ja-block-sticky > .ja-bg-section-nav {
    position: static;
    top: auto;
    /* The nav's own 24px top margin would otherwise show as a gap above the
       bar once it sticks to the offset. Drop it (horizontal auto-margins stay
       for centering; the bottom margin is already 0 on the base rule). */
    margin-top: 0;
}
/* Author opted out of sticky-on-scroll: revert to in-flow positioning. */
.ja-bg-section-nav--static {
    position: relative;
    top: auto;
}
.ja-bg-section-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 60px;
    background: transparent;
    cursor: pointer;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #fff;
    user-select: none;
    outline: none;
}
.ja-bg-section-nav-arrow {
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #fff;
    transition: transform 0.2s ease;
    flex: 0 0 auto;
}
.ja-bg-section-nav-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0 0 12px;
    background: #2282be;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0s linear 0.15s;
    z-index: 51;
}
.ja-bg-section-nav:hover .ja-bg-section-nav-panel,
.ja-bg-section-nav:focus-within .ja-bg-section-nav-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.15s ease, visibility 0s linear 0s;
}
.ja-bg-section-nav:hover .ja-bg-section-nav-arrow,
.ja-bg-section-nav:focus-within .ja-bg-section-nav-arrow {
    transform: rotate(180deg);
}
.ja-bg-section-nav-link {
    display: block;
    padding: 8px 60px;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    transition: color 0.15s;
}
.ja-bg-section-nav-link:hover {
    background: transparent;
    /* Author-configurable via the block's "Dropdown rollover text colour"
       field, which sets --ja-navlink-hover on the nav root. Falls back to
       the original light-blue when unset. */
    color: var(--ja-navlink-hover, #7cb5da);
    text-decoration: none;
}
@media (max-width: 991px) {
    .ja-bg-section-nav-toggle,
    .ja-bg-section-nav-link { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 479px) {
    .ja-bg-section-nav-toggle,
    .ja-bg-section-nav-link { padding-left: 20px; padding-right: 20px; font-size: 14px; }
}

/* =====================================================================
   Canvas block — Figma-style absolute-positioned freeform surface
   ===================================================================== */
.ja-canvas-wrap {
    padding: 0;
    /* Flush against neighbours both top and bottom. Canvases are often
       used as full-bleed colour bands (alternating dark / light), and a
       bottom margin shows the page background between bands as a white
       seam. Authors who want breathing room between two canvases can add
       margin via the Style tab, or use a divider / themed section. */
    margin: 0;
}
.ja-canvas {
    position: relative;
    width: 100%;
    background-color: #f7f7f4;
    overflow: hidden;
}
.ja-canvas-item {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
}
/* A canvas dropped INSIDE another canvas. The parent item's frame is
   already a sized box, so the nested stage fills it rather than
   imposing its own aspect-ratio or max-width on top (which would
   letterbox it inside the frame the author just drew). Only in a
   free-mode parent: in a stack-mode parent the row's height comes
   from its content, so the nested canvas keeps its own sizing. */
.ja-canvas-item-canvas > .ja-canvas-wrap { height: 100%; }
/* The nested stage's own padding (a stack canvas's inner padding) has to
   come out of the frame the author drew, not get added outside it. Only
   nested: a top-level canvas keeps the box model it has always had. */
.ja-canvas-item-canvas > .ja-canvas-wrap > .ja-canvas { box-sizing: border-box; }
.ja-canvas:not(.ja-canvas--stack) > .ja-canvas-item-canvas > .ja-canvas-wrap > .ja-canvas {
    height: 100%;
    aspect-ratio: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
/* A nested canvas has no chrome of its own - the frame is the parent
   item's. Without this the content-block wrapper's own padding and
   background inset the nested stage inside the box the author drew,
   the same way it painted over a container inside a themed section. */
.ja-canvas-item-canvas > .ja-bg-content-block {
    background-color: transparent;
    padding: 0;
    margin: 0;
}

.ja-canvas-item-textwrap {
    display: flex;
    align-items: center;
}
.ja-canvas-item-text {
    width: 100%;
}
/* The inherit rules for typography on canvas <p>/<ul>/<ol> live at the
   bottom of this file (next to the canvas selectors) to keep them
   together. */

/* =====================================================================
   Container block — multi-slot grid layouts
   ===================================================================== */
.ja-container {
    display: grid;
    gap: 24px;
    /* No default padding — containers hug their content. Authors add
       spacing per block via the Style panel (block padding lands on the
       ja-block-style wrapper / canvas item box styles). */
    padding: 0;
    box-sizing: border-box;
}
.ja-container-two_col               { grid-template-columns: 1fr 1fr; }
.ja-container-three_col             { grid-template-columns: 1fr 1fr 1fr; }
.ja-container-four_col              { grid-template-columns: 1fr 1fr 1fr 1fr; }
.ja-container-two_by_two            { grid-template-columns: 1fr 1fr; }
.ja-container-image_left_text_right { grid-template-columns: 2fr 3fr; }
.ja-container-text_left_image_right { grid-template-columns: 3fr 2fr; }
.ja-container-sidebar_left          { grid-template-columns: 1fr 2fr; }
.ja-container-sidebar_right         { grid-template-columns: 2fr 1fr; }
.ja-container-feature_center        { grid-template-columns: 1fr 2fr 1fr; }

.ja-container-align-top    { align-items: start; }
.ja-container-align-center { align-items: center; }
.ja-container-align-bottom { align-items: end; }

.ja-container-slot {
    min-width: 0;
}
.ja-container-slot-image {
    margin: 0 0 16px 0;
}
.ja-container-slot-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}
/* Column image set to "Match the column": the slot stretches to the grid
   row's height (whatever the tallest column — usually the text — sets)
   and becomes a flex column so the figure can absorb the leftover space.
   The <img> itself gets height:100% + object-fit inline from the
   renderer (_ja_img_frame_css), so it crops to the frame instead of
   distorting. align-self beats the container's align-items. */
.ja-container-slot--img-stretch {
    align-self: stretch;
    display: flex;
    flex-direction: column;
}
.ja-container-slot-image--fill {
    flex: 1 1 auto;
    min-height: 0;
}

/* Canvas item text — the wrapper carries the user's font/colour/align
   as inline styles, but the <p> inside is targeted by a global `.ja p`
   rule (line 8) which would otherwise override those. Force every
   typography property to inherit from the wrapper so the inline styles
   actually win. */
.ja-canvas-item-text > p,
.ja-canvas-item-text > ul,
.ja-canvas-item-text > ol,
.ja-canvas-item-text > h2,
.ja-canvas-item-text > h3,
.ja-canvas-item-text > h4 {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    text-align: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    font-family: inherit;
    margin: 0 0 0.4em 0;
    padding: 0;
}
.ja-canvas-item-text > p:last-child,
.ja-canvas-item-text > ul:last-child,
.ja-canvas-item-text > ol:last-child,
.ja-canvas-item-text > h2:last-child,
.ja-canvas-item-text > h3:last-child,
.ja-canvas-item-text > h4:last-child {
    margin-bottom: 0;
}
/* Rich Text canvas items get slightly bumped heading sizes so the
   hierarchy is visible without overriding the user's body font-size.
   These multipliers stack on top of the wrapper's inline font-size,
   so #/##/### still scale with whatever the author set. */
.ja-canvas-item-rich_text > .ja-canvas-item-text > h2 { font-size: 1.6em; font-weight: 700; }
.ja-canvas-item-rich_text > .ja-canvas-item-text > h3 { font-size: 1.3em; font-weight: 700; }
.ja-canvas-item-rich_text > .ja-canvas-item-text > h4 { font-size: 1.1em; font-weight: 700; }
/* Lists in canvas items inherit bullet/number styling but need their
   left-padding back since the inherit rule above wipes it. */
.ja-canvas-item-text > ul,
.ja-canvas-item-text > ol {
    padding-left: 1.2em;
}
.ja-container-corners-square .ja-container-slot-image img {
    border-radius: 0;
}
.ja-bg-image-corners-square img {
    border-radius: 0 !important;
}
.ja-container-slot-image:last-child {
    margin-bottom: 0;
}
/* A converted slot's heading keeps the size, leading and gap its source
   gave it. Only slots carrying those variables are affected. */
.ja-slot-typed .ja-container-slot-text h1,
.ja-slot-typed .ja-container-slot-text h2,
.ja-slot-typed .ja-container-slot-text h3,
.ja-slot-typed .ja-container-slot-text h4 {
    font-family: var(--ja-slot-h-ff, inherit);
    font-size: var(--ja-slot-h-fs, inherit);
    line-height: var(--ja-slot-h-lh, inherit);
    font-weight: var(--ja-slot-h-fw, inherit);
    letter-spacing: var(--ja-slot-h-ls, inherit);
    margin-bottom: var(--ja-slot-h-mb, 6px);
    padding: var(--ja-slot-h-pad, 0);
    /* …and the box the source draws around it. These FAQ questions each sit
       in a rounded coloured tab that holds nothing but the heading, so the
       tab belongs to the heading rather than to the column. Every one of
       these is inert until the slot sets the matching variable. */
    color: var(--ja-slot-h-fg, inherit);
    text-align: var(--ja-slot-h-ta, inherit);
    background-color: var(--ja-slot-h-bg, transparent);
    border-radius: var(--ja-slot-h-br, 0);
    border-width: var(--ja-slot-h-bw, 0);
    border-style: var(--ja-slot-h-bs, solid);
    border-color: var(--ja-slot-h-bc, currentColor);
    margin-left: var(--ja-slot-h-ml, 0);
    margin-right: var(--ja-slot-h-mr, 0);
}

.ja-container-slot-text > p {
    margin: 0 0 12px 0;
    font-size: 16px;
    line-height: 26px;
}
/* A converted slot's copy keeps the type its source used, for the same
   reason as its heading: ours is 16px/26px and the difference shows as a
   gap under the heading. Only slots carrying the variables are affected. */
.ja-slot-typed .ja-container-slot-text > p {
    font-size: var(--ja-slot-p-fs, 16px);
    line-height: var(--ja-slot-p-lh, 26px);
    margin-top: var(--ja-slot-p-mt, 0);
    margin-bottom: var(--ja-slot-p-mb, 12px);
    padding: var(--ja-slot-p-pad, 0);
}
.ja-container-slot-text > p:last-child {
    margin-bottom: 0;
}
/* A converted title whose first line is set differently from the rest —
   72px bold over 55px light, in the source one <h2> split by a <br>.
   The span only exists when the slot carries the accent variables, so
   `display:block` here is what puts it on its own line (no <br> needed). */
.ja-slot-typed .ja-container-slot-text h1 .ja-slot-h-accent,
.ja-slot-typed .ja-container-slot-text h2 .ja-slot-h-accent,
.ja-slot-typed .ja-container-slot-text h3 .ja-slot-h-accent,
.ja-slot-typed .ja-container-slot-text h4 .ja-slot-h-accent {
    display: block;
    font-size:      var(--ja-slot-ha-fs, inherit);
    line-height:    var(--ja-slot-ha-lh, inherit);
    font-weight:    var(--ja-slot-ha-fw, inherit);
    letter-spacing: var(--ja-slot-ha-ls, inherit);
    color:          var(--ja-slot-ha-fg, inherit);
}
/* A column's call to action. The fill, measure and type come from the
   source as an inline style on the <a>; these are only the parts that
   make it a button rather than a line of text. */
.ja-container-slot-cta {
    margin-top: 24px;
}
.ja-slot-cta {
    display: inline-block;
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
}
.ja-slot-cta:hover {
    text-decoration: none;
    filter: brightness(0.94);
}
.ja-container-slot-text > ul {
    margin: 0 0 12px 20px;
    padding: 0;
}

@media (max-width: 991px) {
    .ja-container { gap: 20px; } /* no default padding at any breakpoint */
    .ja-container-three_col,
    .ja-container-four_col,
    .ja-container-feature_center {
        grid-template-columns: 1fr 1fr;
    }
    .ja-container-image_left_text_right,
    .ja-container-text_left_image_right,
    .ja-container-sidebar_left,
    .ja-container-sidebar_right {
        grid-template-columns: 1fr;
    }
}
/* Tablet — collapse two_col / two_by_two earlier so a text+canvas
   pairing has room to breathe rather than squeezing both halves. */
@media (max-width: 768px) {
    .ja-container-two_col,
    .ja-container-two_by_two {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px) {
    .ja-container { gap: 16px; } /* no default padding at any breakpoint */
    .ja-container-two_col,
    .ja-container-three_col,
    .ja-container-four_col,
    .ja-container-two_by_two,
    .ja-container-image_left_text_right,
    .ja-container-text_left_image_right,
    .ja-container-sidebar_left,
    .ja-container-sidebar_right,
    .ja-container-feature_center {
        grid-template-columns: 1fr;
    }
}