Visual consistency of in content headings and headings in/under tabs structure

I'm looking to define what makes more sense in a page visual hierarchy for both visual design / consistency & accessibility.

We commonly have tabs under our h1 heading. Each tab content block contains a h2 as part of the button to toggle the tab open and closed. These h2's are styled separately from our standard h2 styling to fit the space, the markup looks something like this;

<h1>h1 Heading up here somewhere</h1>
<section class="tab">
  <a class="tab__button">
    <h2 class="tab__heading">Lorem ipsum</h2>
  </a>
  <div class="tab__content">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit...</p>
    <h3>Lorem ipsum...</h3>

    ...

and the output looks something like this;

We maintain the standard style for H3s even though we've broken the type styles at the h2 heading level. The problem is that at this point the page can look like it's going from a h1 to a h3. Additionally if there is another h2 before these tabs it could look like the tabbed content under the heading is owned by the h2 above the tabs because visually it looks like it's going from the h2 above the tabs to the h3 in the tabs without any recognition that there's a h2 between the two content blocks.

In this case is it better to style the content in tabs to have the visual appearance to be 1 heading style higher than it is, So h3s as h2s and h4s as h3s? Screenshot attached below

Or is it better to maintain the default standard heading sizes for headings in standard content (so h3s as h3s). This issue feels like it impacts on user experiance and usability but it's likely that users will see these pages in isolation and may never see another content page so is it even a problem and would it be something that matters to a user?