/**
 * Insight / whitepaper report styles.
 *
 * Scoped entirely to `ir-*` classes, so loading this on other whitepaper posts
 * has no effect unless they opt in by using these classes or the two custom
 * blocks (Insight Bar Chart, Insight Data Table).
 *
 * Layout follows the approved mockup; brand hues come from the --roadmap-*
 * tokens defined on :root in style.css. Supporting greys and the two badge
 * tints are functional (not brand hues) and are defined locally.
 */

.ir-hero,
.ir-section,
.ir-cta-wrap {
    /* Brand hues are pulled from the :root tokens in style.css rather than
     * hard-coded, so a future brand change flows through automatically.
     * The mockup used a slightly different navy and an orange accent; neither
     * exists in the Roadmap palette, so both map onto the real brand colours. */
    --ir-navy: var(--roadmap-primary-green);   /* #000033 */
    --ir-navy-deep: var(--roadmap-primary-green);
    --ir-accent: var(--roadmap-teal-green);    /* #2E9CCA */

    /* Lifted tint of the brand navy - depth for the hero/CTA gradient only,
     * not a separate brand colour. */
    --ir-navy-grad: #0A2150;

    --ir-page: #F6F7FB;
    --ir-line: #E4E8F1;
    --ir-muted: #5A6B85;
    --ir-mono: #7C8CA5;
    --ir-projected: #9FB1CC;
    --ir-badge-green: #E3F0E6;
    --ir-badge-green-ink: #2F6B45;
    --ir-badge-pink: #FAE4E4;
    --ir-badge-pink-ink: #A33B3B;
    --ir-badge-neutral: #EDF1F7;
    --ir-empty: #E3E7F0;
    --ir-radius: 10px;
    /* Eyebrows, badges, table labels and fine print all use the site's body
     * typeface. `inherit` rather than naming DM Sans, so these follow the
     * theme if its font ever changes. Uppercasing and letter-spacing carry the
     * "label" treatment instead of a contrasting mono face. */
    --ir-label-font: inherit;
}

/* The template wraps entries in `.inner-section` (max-width 1200px + 6rem
 * padding). These reports need edge-to-edge bands instead, so that cap is
 * released for flagged posts only - other whitepaper posts keep the wrapper.
 * `body.` prefix outranks the theme's `.single .inner-section`. */
body.insight-report .inner-section {
    max-width: none;
    padding: 0;
}

/* ## Global first/last-child resets
 *
 * style.css carries two site-wide rules:
 *     *:first-child { margin-top: 0; padding-top: 0 }
 *     *:last-child  { margin-bottom: 0; padding-bottom: 0 }
 *
 * They are relied on elsewhere, so they stay. They are only specificity (0,1,0)
 * but they strip the vertical padding off whichever element happens to sit
 * first or last inside these components - card headers, the first and last
 * table row, grid cells, the gate and its button. Everything below simply
 * restores that padding at (0,2,0)+ so the fix holds no matter which
 * stylesheet loads first.
--------------------------------------------- */

body.insight-report .ir-hero { padding-top: 6rem; }
body.insight-report .ir-section { padding-top: 5.5rem; padding-bottom: 5.5rem; }
body.insight-report .ir-section + .ir-section { padding-top: 0; }
body.insight-report .ir-cta-wrap { padding-top: 2rem; padding-bottom: 6rem; }

.ir-cta-wrap .ir-cta { padding-top: 5rem; padding-bottom: 5rem; }
.ir-section .ir-chart { padding-top: 2.6rem; padding-bottom: 1.6rem; }

.ir-table .ir-table-head { padding-top: 2rem; padding-bottom: 2rem; }
.ir-table .ir-row { padding-top: 1.8rem; padding-bottom: 1.8rem; }
.ir-table .ir-row--head { padding-top: 1.3rem; padding-bottom: 1.3rem; }

.ir-locked .ir-gate { padding-top: 2rem; padding-bottom: 2rem; }
.ir-gate a.ir-gate-btn { padding-top: 1.3rem; padding-bottom: 1.3rem; }

.ir-unlocks .ir-unlock-grid li { padding-top: 2rem; padding-bottom: 2rem; }

/* Full-bleed bands with a constrained reading column. */
.ir-hero > .gb-layout-column-wrap,
.ir-section > .gb-layout-column-wrap,
.ir-cta-wrap > .gb-layout-column-wrap {
    max-width: 900px;
    margin: 0 auto;
}

.ir-section {
    background: var(--ir-page);
    padding: 5.5rem 0;
}

.ir-section + .ir-section {
    padding-top: 0;
}

/* ## Shared type
--------------------------------------------- */

.ir-eyebrow {
    font-family: var(--ir-label-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ir-accent);
    margin: 0 0 1.2rem;
}

/* Short rule above the section eyebrow. */
.ir-section .ir-eyebrow::before {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    background: var(--ir-accent);
    margin-bottom: 2.2rem;
}

/* Type scale below follows the theme's own steps (html is 62.5%, so 1rem =
 * 10px): h1 5.2 / h2 4.1 / h3 2.8 / h4 2.4rem, body 2rem. Sizes are in rem so
 * they track the site rather than the mockup's px values. Data-dense component
 * text (table cells, chart labels, badges) stays deliberately smaller. */
.ir-h2 {
    font-size: 4.1rem;
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ir-navy);
    margin: 0 0 1.6rem;
    max-width: 28ch;
}

.ir-lede {
    font-size: 2rem;
    line-height: 1.6;
    color: var(--ir-muted);
    margin: 0 0 3rem;
    max-width: 62ch;
}

.ir-note {
    font-size: 2rem;
    line-height: 1.6;
    color: var(--ir-muted);
    margin: 2.2rem 0 0;
    max-width: 68ch;
}

.ir-accent {
    color: var(--ir-accent);
}

/* ## Hero
--------------------------------------------- */

.ir-hero {
    position: relative;
    background: linear-gradient(135deg, var(--ir-navy) 0%, var(--ir-navy-grad) 100%);
    padding: 6rem 0 4.5rem;
    overflow: hidden;
}

/* Fine dot grid, as in the mockup. */
.ir-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}

.ir-hero > .gb-layout-column-wrap {
    position: relative;
    z-index: 1;
}

.ir-hero .ir-eyebrow {
    color: #7FA3D6;
    margin-bottom: 1.8rem;
}

.ir-hero-title {
    font-size: 5.2rem;
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: #fff;
    margin: 0 0 2rem;
    max-width: 20ch;
}

.ir-hero-sub {
    font-size: 2rem;
    line-height: 1.6;
    color: #B9C8DE;
    margin: 0 0 2.8rem;
    max-width: 52ch;
}

/* Button + inline note.
 * Core group markup differs by WP version - some emit an inner container, some
 * do not - so both levels are flexed. */
.ir-hero-actions,
.ir-hero-actions > .wp-block-group__inner-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.8rem;
}

.ir-hero-actions {
    margin-bottom: 4.5rem;
}

.ir-hero-actions a.wp-block-button__link,
.ir-hero-actions a.wp-block-button__link:hover,
.ir-hero-actions a.wp-block-button__link:focus {
    display: inline-block;
    background: var(--ir-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    padding: 1.5rem 2.4rem;
    border-radius: 6px;
    border: 0;
    text-decoration: none;
    transition: 0.25s ease;
}

.ir-hero-actions a.wp-block-button__link:hover,
.ir-hero-actions a.wp-block-button__link:focus {
    filter: brightness(1.07);
}

.ir-hero-fineprint {
    font-family: var(--ir-label-font);
    font-size: 12px;
    color: #8FA3C0;
    margin: 0;
}

/* Stats strip. */
.ir-stats {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding-top: 2.6rem;
}

.ir-stats > .gb-layout-column-wrap {
    gap: 0;
}

.ir-stats .gb-block-layout-column {
    padding-left: 2.4rem;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.ir-stats .gb-block-layout-column:first-child {
    padding-left: 0;
    border-left: 0;
}

.ir-stat-num {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    margin: 0 0 0.9rem;
    letter-spacing: -0.01em;
}

.ir-stat-num .ir-accent {
    font-size: 20px;
}

.ir-stat-label {
    font-family: var(--ir-label-font);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8FA3C0;
    margin: 0;
}

/* ## Bar chart block
--------------------------------------------- */

.ir-chart {
    background: #fff;
    border: 1px solid var(--ir-line);
    border-radius: var(--ir-radius);
    padding: 2.6rem 2.8rem 1.6rem;
}

.ir-chart-title {
    font-family: var(--ir-label-font);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ir-mono);
    margin: 0 0 3.2rem;
}

.ir-chart-plot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}

.ir-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Fixed-height column so each bar's percentage height resolves against it. */
.ir-bar-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 230px;
}

.ir-bar-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--ir-navy);
    margin-bottom: 1rem;
}

.ir-bar-shape {
    display: block;
    width: 100%;
    max-width: 92px;
    min-height: 6px;
    background: var(--ir-navy-deep);
    border-radius: 3px 3px 0 0;
}

.ir-bar-label {
    font-size: 13px;
    color: var(--ir-muted);
    margin-top: 1.4rem;
}

.ir-bar--highlight .ir-bar-shape {
    background: var(--ir-accent);
}

.ir-bar--highlight .ir-bar-value {
    color: var(--ir-navy);
}

/* Projected bars read as hatched rather than solid. */
.ir-bar--projected .ir-bar-shape {
    background-color: #C3D0E4;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.85) 0,
        rgba(255, 255, 255, 0.85) 4px,
        transparent 4px,
        transparent 9px
    );
    border: 1px solid var(--ir-projected);
}

.ir-bar--projected .ir-bar-value {
    color: var(--ir-projected);
}

.ir-chart-foot {
    font-family: var(--ir-label-font);
    font-size: 11.5px;
    color: var(--ir-mono);
    margin: 2.4rem 0 0;
    padding-top: 1.6rem;
    border-top: 1px solid var(--ir-line);
}

/* ## Data table block
--------------------------------------------- */

.ir-table {
    background: #fff;
    border: 1px solid var(--ir-line);
    border-radius: var(--ir-radius);
    overflow: hidden;
}

.ir-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 2rem 2.4rem;
    border-bottom: 1px solid var(--ir-line);
}

.ir-table-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ir-navy);
    margin: 0;
}

.ir-badge {
    flex: none;
    font-family: var(--ir-label-font);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.7rem 1.2rem;
    border-radius: 4px;
    background: var(--ir-badge-neutral);
    color: var(--ir-muted);
}

.ir-badge--green {
    background: var(--ir-badge-green);
    color: var(--ir-badge-green-ink);
}

.ir-badge--pink {
    background: var(--ir-badge-pink);
    color: var(--ir-badge-pink-ink);
}

.ir-row {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: 1.8rem 2.4rem;
    border-bottom: 1px solid var(--ir-line);
}

.ir-table-body > .ir-row:last-child,
.ir-locked:last-child .ir-locked-rows > .ir-row:last-child {
    border-bottom: 0;
}

/* --- ranked variation --- */

.ir-rank {
    flex: none;
    width: 26px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ir-accent);
}

.ir-row-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.ir-row-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ir-navy);
}

.ir-row-sub {
    font-family: var(--ir-label-font);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ir-mono);
}

.ir-row-metric {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}

.ir-row-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--ir-navy);
}

.ir-row-unit {
    font-size: 12px;
    color: var(--ir-mono);
}

/* --- columns variation --- */

.ir-table--columns .ir-row {
    gap: 0;
}

.ir-table--columns .ir-cell {
    min-width: 0;
    padding-right: 1.6rem;
    font-size: 14px;
    color: var(--ir-navy);
    overflow-wrap: anywhere;
}

.ir-table--columns .ir-cell--1 { flex: 0 0 16%; font-family: var(--ir-label-font); font-size: 12.5px; color: var(--ir-mono); }
.ir-table--columns .ir-cell--2 { flex: 0 0 34%; font-weight: 700; }
.ir-table--columns .ir-cell--3 { flex: 0 0 30%; }
.ir-table--columns .ir-cell--4 { flex: 0 0 20%; font-family: var(--ir-label-font); font-size: 12.5px; color: var(--ir-mono); padding-right: 0; }

.ir-row--head {
    background: #FAFBFD;
    padding-top: 1.3rem;
    padding-bottom: 1.3rem;
}

.ir-row--head .ir-cell {
    font-family: var(--ir-label-font);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ir-mono);
}

/* ## Gated / blurred rows
--------------------------------------------- */

.ir-locked {
    position: relative;
}

/* The overlay is absolutely positioned, so the run behind it must be tall
 * enough to hold it - otherwise the card's overflow:hidden clips the CTA when
 * only two or three rows are blurred. */
.ir-locked--gated {
    min-height: 360px;
}

.ir-locked-rows {
    filter: blur(5px);
    opacity: 0.75;
    user-select: none;
    pointer-events: none;
}

/* Scrim fades the blurred rows out toward the bottom, as in the mockup. */
.ir-gate {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 3rem;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.88) 45%,
        rgba(255, 255, 255, 0.97) 100%
    );
}

.ir-gate-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 2px solid var(--ir-navy);
    border-radius: 10px;
    color: var(--ir-accent);
    font-size: 18px;
    margin-bottom: 1.6rem;
    background: #fff;
}

.ir-gate-heading {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--ir-navy);
    margin: 0 0 1.2rem;
}

.ir-gate-text {
    font-size: 1.8rem;
    line-height: 1.6;
    color: var(--ir-muted);
    margin: 0 0 2rem;
    max-width: 52ch;
}

/* `.entry-content a` (0,2,0) recolours and underlines links, so the gate CTA
 * is matched at (0,2,1) to win outright rather than relying on load order. */
.ir-gate a.ir-gate-btn,
.ir-gate a.ir-gate-btn:hover,
.ir-gate a.ir-gate-btn:focus {
    display: inline-block;
    background: var(--ir-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    padding: 1.3rem 2.2rem;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: none;
    transition: 0.25s ease;
}

.ir-gate a.ir-gate-btn:hover,
.ir-gate a.ir-gate-btn:focus {
    filter: brightness(1.07);
}

/* ## "What the report unlocks" grid
--------------------------------------------- */

.ir-unlock-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--ir-empty);
    border: 1px solid var(--ir-line);
    border-radius: 6px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ir-unlock-grid li {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    background: #fff;
    padding: 2rem 1.8rem;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ir-navy);
    margin: 0;
}

/* Icon drawn in CSS so the grid stays a plain list block. */
.ir-unlock-grid li::before {
    content: "";
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border-radius: 5px;
    background: var(--ir-navy);
    box-shadow: inset 0 0 0 4px var(--ir-navy), inset 0 0 0 9px var(--ir-accent);
}

/* ## Closing CTA
--------------------------------------------- */

.ir-cta-wrap {
    background: var(--ir-page);
    padding: 2rem 0 6rem;
}

.ir-cta {
    position: relative;
    background: linear-gradient(135deg, var(--ir-navy) 0%, var(--ir-navy-grad) 100%);
    border-radius: 14px;
    padding: 5rem 4rem;
    text-align: center;
    overflow: hidden;
}

.ir-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}

.ir-cta > *,
.ir-cta > .wp-block-group__inner-container {
    position: relative;
    z-index: 1;
}

.ir-cta .ir-eyebrow {
    color: #7FA3D6;
    margin-bottom: 1.6rem;
}

.ir-cta-title {
    font-size: 4.1rem;
    line-height: 1.25;
    font-weight: 800;
    color: #fff;
    margin: 0 auto 1.8rem;
    max-width: 18ch;
}

.ir-cta-text {
    font-size: 2rem;
    line-height: 1.6;
    color: #B9C8DE;
    margin: 0 auto 2.6rem;
    max-width: 56ch;
}

/* Core buttons default to left; this card is centred. */
.ir-cta .wp-block-buttons {
    justify-content: center;
}

.ir-cta a.wp-block-button__link,
.ir-cta a.wp-block-button__link:hover,
.ir-cta a.wp-block-button__link:focus {
    background: var(--ir-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 1.5rem 2.6rem;
    border-radius: 6px;
    text-decoration: none;
}

.ir-cta a.wp-block-button__link:hover,
.ir-cta a.wp-block-button__link:focus {
    filter: brightness(1.07);
}

.ir-cta-fineprint {
    font-family: var(--ir-label-font);
    font-size: 12px;
    color: #8FA3C0;
    margin: 2.2rem 0 0;
}

/* ## Download form inside the closing CTA
 *
 * The theme sets GF labels to #242424, which is invisible on the navy card, so
 * the label and helper colours are lifted here. Selectors carry `.ir-cta` on
 * top of the theme's own `.gform_wrapper.gravity-theme ...` (0,3,0) so they win
 * on specificity rather than on stylesheet order.
--------------------------------------------- */

/* Gravity Forms' own stylesheet is enqueued AFTER this one, so single-class
 * selectors lose ties to it. The `body.insight-report` prefix lifts these above
 * anything GF ships without resorting to !important. */
body.insight-report .ir-cta .gform_wrapper.gravity-theme {
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

body.insight-report .ir-cta .gform_wrapper.gravity-theme .gfield_label {
    color: #fff;
    text-align: center;
}

body.insight-report .ir-cta .gform_wrapper.gravity-theme .gfield input {
    width: 100%;
    background: #fff;
    text-align: left;
}

body.insight-report .ir-cta .gform_wrapper.gravity-theme .gfield input::placeholder {
    color: #8A99AE;
    opacity: 1;
}

body.insight-report .ir-cta .gform_wrapper .gfield_description,
body.insight-report .ir-cta .gform_wrapper .gform_required_legend,
body.insight-report .ir-cta .gform_wrapper .gfield_captcha_container {
    color: #B9C8DE;
}

/* Submit sits centred under the field, like the button it replaced. */
body.insight-report .ir-cta .gform_wrapper.gravity-theme .gform_footer {
    display: flex;
    justify-content: center;
    padding-bottom: 0;
    margin-bottom: 0;
}

body.insight-report .ir-cta .gform_wrapper.gravity-theme .gform_footer input[type="submit"] {
    background: var(--ir-accent);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    width: auto;
    padding: 1.5rem 2.6rem;
    border: 0;
    border-radius: 6px;
}

body.insight-report .ir-cta .gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover {
    filter: brightness(1.07);
}

/* Confirmation message after an AJAX submit. */
body.insight-report .ir-cta .gform_confirmation_message {
    color: #fff;
    font-size: 1.8rem;
}

/* ## Editor-only notice
 * Rendered by whitepaper-post-template.php when a report has no Resource
 * Name/URL. Only output for users who can edit the post, so visitors never see
 * it - deliberately styled as a warning rather than page content. */
.ir-editor-warning {
    max-width: 900px;
    margin: 0 auto 4rem;
    padding: 1.6rem 2rem;
    background: #FFF6E5;
    border: 1px solid #E7C46A;
    border-left: 4px solid #D9A32B;
    border-radius: 6px;
    color: #6B4E12;
    font-size: 1.5rem;
    line-height: 1.5;
}

/* ## Responsive
--------------------------------------------- */

@media (max-width: 1023px) {
    .ir-hero > .gb-layout-column-wrap,
    .ir-section > .gb-layout-column-wrap,
    .ir-cta-wrap > .gb-layout-column-wrap {
        max-width: none;
        padding-left: 2.4rem;
        padding-right: 2.4rem;
    }

    .ir-unlock-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .ir-hero-title { font-size: 3.4rem; }
    .ir-h2 { font-size: 2.8rem; }
    .ir-cta-title { font-size: 2.8rem; }

    .ir-section { padding: 4rem 0; }
    .ir-hero { padding: 4rem 0 3.5rem; }
    .ir-cta { padding: 3.5rem 2rem; }

    .ir-chart,
    .ir-table-head,
    .ir-row {
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }

    .ir-chart { padding-top: 2rem; }
    .ir-chart-plot { gap: 0.6rem; }
    .ir-bar-col { height: 170px; }
    .ir-bar-value { font-size: 13px; }
    .ir-bar-label { font-size: 11px; }

    /* Stat cards stack into a 2-up grid rather than four thin slivers. */
    .ir-stats .gb-block-layout-column {
        padding-left: 0;
        border-left: 0;
        padding-bottom: 2rem;
    }

    .ir-unlock-grid {
        grid-template-columns: 1fr;
    }

    /* Four columns cannot hold their shape on a phone; drop the least
       essential ones and let the rest breathe. */
    .ir-table--columns .ir-cell--1 { flex: 0 0 30%; }
    .ir-table--columns .ir-cell--2 { flex: 0 0 70%; }
    .ir-table--columns .ir-cell--3 { flex: 0 0 70%; margin-left: 30%; }
    .ir-table--columns .ir-cell--4 { flex: 0 0 70%; margin-left: 30%; }
    .ir-table--columns .ir-row { flex-wrap: wrap; row-gap: 0.4rem; }
    .ir-table--columns .ir-row--head { display: none; }

    .ir-gate { padding: 1.5rem; }
    .ir-gate-heading { font-size: 2rem; }
    .ir-gate-text { font-size: 1.6rem; margin-bottom: 1.4rem; }
}