/* =========================================================================
   home.css — the front page.

   Implements home.html. Loaded on the front page only, on top of tokens.css,
   chrome.css and archive.css.

   WHAT IS NOT IN HERE, AND WHY.

   .band, .band-head, .chips, .chip, .products, li.product and the whole
   product card live in archive.css and are used verbatim. The mockup defines
   them too — every mockup inlines the shared chrome so it opens standalone —
   but a second copy here is a second place for the card grid to drift, which
   is the mistake hub.css already made once and corrected by moving those rules
   down into archive.css. This file adds only what the front page has that no
   other page does: the masthead, the departments directory, and the newsletter
   band.

   Class names are the mockup's where they are page-specific (.tallies, .dept,
   .depts, .lede) and prefixed where they are structural (.dta-home__hero,
   .dta-home__signup), which is the convention hub.css set.

   Every value is a token. No colour and no spacing figure is introduced here.
   The two literals are the masthead's scrim and panel alphas, which are the
   mockup's own and are explained where they appear.
   ====================================================================== */


/* -------------------------------------------------------------------------
   1. The page shell.

   The masthead and the newsletter bleed to the viewport edge; the middle is
   constrained. That is why front-page.php does not open OceanWP's
   #content-wrap.container — a full-width band inside a max-width container
   needs a 100vw escape hack, and these are direct children of main#main
   instead, which needs none.

   --dta-shell-max is chrome.css's, so the body lines up with the header and
   the nav above it rather than with the mockup's narrower --page-max.

   THE CAP INCLUDES THE GUTTERS, AND READING --dta-shell-max BARE WAS NOT
   ENOUGH. This note used to stop at the paragraph above, and it was half
   right: the token was the header's, but the geometry was not. chrome.css
   records the rule on its own `body .container` — .site-header puts its
   padding OUTSIDE the element that carries the max-width, so the header's
   CONTENT box is the full shell, while a bare `max-width: var(--dta-shell-max)`
   with `padding: 0 var(--s-4)` under border-box makes the content box the
   shell MINUS two gutters. Matching max-widths is not matching edges.

   Measured on staging at a 1600px viewport, before: the header, the nav and
   the footer row all at 72.5px, these two bands at 88.5px. Sixteen pixels,
   on every band of the front page, for as long as the front page has
   existed — the near-miss chrome.css's own comment describes, in the one
   file that was never brought onto the pattern.

   calc(shell + two gutters) makes the content box equal the shell, which is
   what the header's and the footer's already are. Measured after: 72.5px on
   all five. Below the cap nothing changes — the max-width stops binding and
   the gutter is just the gutter.
   ---------------------------------------------------------------------- */

.dta-home__body {
  max-width: calc(var(--dta-shell-max) + var(--s-4) * 2);
  margin: 0 auto;
  padding: 0 var(--s-4);
}

/* The last band's rule would draw immediately above the newsletter band's own
   top border — two lines a pixel apart. */
.dta-home__band--last {
  border-bottom: 0;
}


/* The one route out of the "Just in" band.

   archive.css sets .band-head .more at --t-sm in Archivo Narrow, which is the
   right weight for the hub, where the same component sits above a page that
   already lists everything the link goes to and is one of several. On the
   front page it is the ONLY way from six cards to the other 203,000, against a
   25px heading, and at 14px narrow it read as a caption.

   --t-md and semibold: one step below the heading beside it, and the same
   accent colour it already had. No new token, and scoped to .dta-home so the
   hub and the series archive keep the size that suits them. */
.dta-home .band-head .more {
  font-family: var(--f-sans);
  font-size: var(--t-md);
  font-weight: var(--w-semibold);
}


/* -------------------------------------------------------------------------
   2. The masthead.

   banner.png is hotlinked from the live bucket. Its tones are not known at
   build time and it is going to be reshot, so legibility does not rest on the
   scrim: the copy sits on its own near-opaque panel, which holds whatever the
   artwork behind it does. Measured against the worst case of a pure white
   image behind the panel, the heading is 13.6:1, the standfirst 10.5:1 and the
   tally labels 8:1 — all past AAA.

   The two rgba() values are the mockup's and are the only literals in this
   file. They are alpha over --c-darker (#221d1d), not new colours: .55 for the
   scrim that settles the image, .93 for the panel that carries the type.
   ---------------------------------------------------------------------- */

.dta-home__hero {
  background-color: var(--c-darker);
  background-image:
    linear-gradient(rgba(34, 29, 29, .55), rgba(34, 29, 29, .55)),
    url('https://dta-woo-assets.nyc3.digitaloceanspaces.com/dta-collectibles/banner.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--s-7) 0;
}

/* Same cap as .dta-home__body, for the reason section 1 gives: the gutters
   are inside the max-width, so the max-width has to carry them if the panel
   is to start on the same line as the header above it. */
.dta-home__hero-inner {
  max-width: calc(var(--dta-shell-max) + var(--s-4) * 2);
  margin: 0 auto;
  padding: 0 var(--s-4);
}

.dta-home__panel {
  background: rgba(34, 29, 29, .93);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--radius);
  padding: var(--s-5) var(--s-6);
  max-width: 640px;
}

.dta-home__panel h1 {
  color: var(--c-text-invert);
  font-family: var(--f-sans);
  font-size: var(--t-xl);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  max-width: 20ch;
  margin: 0 0 var(--s-2);
}

.dta-home__panel .lede {
  color: var(--c-muted);
  font-size: var(--t-base);
  line-height: var(--lh-snug);
  max-width: 52ch;
  margin: 0;
}


/* -------------------------------------------------------------------------
   3. Tallies.

   The mockup's names. Not in archive.css: the hub's tallies are scoped to the
   hub's own block and carry different furniture, so there is no shared
   definition to reuse and nothing here to push down into the shared file.
   ---------------------------------------------------------------------- */

.dta-home .tallies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-top: var(--s-4);
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  color: var(--c-border-focus);
}

.dta-home .tally b {
  display: block;
  font-family: var(--f-sans);
  font-size: var(--t-lg);
  font-weight: var(--w-bold);
  color: var(--c-text-invert);
  line-height: 1;
  font-feature-settings: var(--num-tabular);
}


/* -------------------------------------------------------------------------
   4. The departments directory.
   ---------------------------------------------------------------------- */

.dta-home .depts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--s-4);
}

.dta-home .dept {
  border: var(--rule);
  border-top: 3px solid var(--c-dark);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
}

.dta-home .dept h3 {
  font-size: var(--t-md);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-1);
}

.dta-home .dept h3 a {
  color: var(--c-text-strong);
  text-decoration: none;
}

.dta-home .dept h3 a:hover {
  color: var(--c-accent);
}

.dta-home .dept .n {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  display: block;
  margin-bottom: var(--s-3);
  font-feature-settings: var(--num-tabular);
}

.dta-home .dept .n b {
  color: var(--c-text-strong);
  font-weight: var(--w-semibold);
}

.dta-home .dept ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
}

.dta-home .dept li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-1) 0;
  border-bottom: 1px dotted var(--c-border);
}

.dta-home .dept li:last-child {
  border-bottom: 0;
}

.dta-home .dept li a {
  color: var(--c-text);
  text-decoration: none;
}

.dta-home .dept li a:hover {
  color: var(--c-accent);
  text-decoration: underline;
}

/* THE FIGURE IS THE POINT OF THE ROW, AND IT WAS PAINTED IN A BORDER COLOUR.

   This read `--c-border-focus`, which is #dddddd — a token for the edge of an
   input, used here as text. Against #ffffff that is roughly 1.3:1, below any
   contrast floor and well under the #666666 of the label beside it, so the
   column of numbers was the faintest thing in a block whose entire job is
   comparison: 9,063 against 2,885 against 1,506 is what tells someone where
   the stock actually is, and it was set to disappear.

   Now --c-text-strong, the same ink as the department heading above, at medium
   rather than the heading's semibold — so the figures read clearly without
   competing with the department's own total, which stays the heaviest number
   in the block. No new token, and the tabular figures were already right. */
.dta-home .dept li span {
  color: var(--c-text-strong);
  font-weight: var(--w-medium);
  font-feature-settings: var(--num-tabular);
}


/* -------------------------------------------------------------------------
   5. The newsletter band.

   A quiet band, not a slab: sunk neutral rather than accent, below the
   merchandise rather than interrupting it, and the submit is --c-dark rather
   than --c-accent so it does not read as loudly as an Add to cart.

   THE FORM IS WPFORMS' MARKUP, NOT THE MOCKUP'S. inc/home.php renders form
   1135 through its own shortcode — the same form the Elementor Pro popup uses
   — because hand-rolling a form that POSTs at WPForms would mean reproducing
   its nonce, its honeypot and its field naming, all of which are WPForms' to
   change on update. So section 5.1 styles what WPForms emits rather than
   assuming the mockup's <label>/<input>/<button>. Selectors are kept to
   WPForms' stable outer classes; if an update changes them, the band degrades
   to an unstyled but working form rather than to a broken one.
   ---------------------------------------------------------------------- */

.dta-home__signup {
  background: var(--c-surface-sunk);
  border-top: var(--rule);
  border-bottom: var(--rule);
  padding: var(--s-6) 0;
}

/* THE NARROW CAP IS GONE, AND ITS REASON WENT WITH THE SECOND COLUMN.

   This row was capped at --page-max while the band was two columns. At
   --dta-shell-max the inner was 1,425px at a 1440 viewport, holding a 557px
   copy column and a 470px form under `justify-content: space-between` — 366px
   of dead space between them, 26% of the row. Two islands at opposite ends of
   a strip is what makes a signup block read as an advertisement embedded in
   the page rather than as part of it, and narrowing the row closed that gap.

   Then the block was stacked (see the note below) and the form was capped at
   640px, and there was no second column left for dead space to open between.
   The cap was answering a problem the layout no longer had.

   What it was still doing was standing the band off the page's own column.
   Measured on staging at a 1600px viewport: this row's content box at
   208.5px, against 88.5px for the departments block directly above it and
   72.5px for the header and the footer. 136px inside the page — which is the
   advertisement-dropped-into-the-page reading the cap was reaching for in the
   first place, arrived at from the other direction.

   Same shell as every other band on the page now, gutters inside the cap for
   the reason section 1 gives. Measured after: 72.5px, level with the
   masthead, the departments block, the header and the footer. The form's own
   640px cap is what keeps the controls off a 1,440px measure; the row does
   not have to be narrow for the form to be. */
/* HEADING ABOVE THE FORM, NOT BESIDE IT.

   This was two columns, and the second column was empty for the whole height
   of the block. Measured at 804px: a 54px heading beside a 346px form, in a
   490px band whose height was set entirely by the taller side. Capping the row
   at --page-max removed the horizontal void between them and left the
   vertical one, which was the larger problem and the one a narrower row could
   not touch — half the width spent on nothing, for the full height.

   Stacked, the heading is one line across the top and the form runs full width
   beneath it. Nothing is marooned, and the block's height is the sum of two
   short things rather than the height of the taller of two unequal ones.

   The flex properties are gone rather than left inert. A display value that no
   longer applies, with alignment rules under it that describe a layout the
   element is not doing, is how the next person reads this block wrongly. */
.dta-home__signup-inner {
  max-width: calc(var(--dta-shell-max) + var(--s-4) * 2);
  margin: 0 auto;
  padding: 0 var(--s-4);
}

.dta-home__signup-copy {
  margin-bottom: var(--s-4);
}

/* No flex basis on the copy, deliberately: it is `flex: 0 1 auto` exactly as
   the mockup's bare <div> is, and the form beside it carries the basis. Giving
   the copy one too was tried and is a value the mockup does not have. */

/* The heading is the whole of the copy now — the paragraph under it was
   dropped on Sept 10, so its bottom margin was spacing it from nothing. The
   48ch cap is the paragraph's own measure, kept because it is what stops a
   one-line invitation running the full width of the column beside a 470px
   form. */
/* NO MEASURE CAP, NOW THAT IT IS NOT A COLUMN.

   48ch was right when the heading was one of two columns: it stopped a short
   sentence stretching across half the band. Above a full-width form it does
   the opposite — it wraps a one-line sentence onto two, and at 804px that was
   27px of avoidable height on a block being condensed. One line is also how
   this reads: it is an invitation, not running text, so the measure rule that
   protects paragraphs is not the rule that applies to it. */
.dta-home__signup h2 {
  font-size: var(--t-md);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  margin: 0;
}

.dta-home__signup p {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  margin: 0;
  max-width: 48ch;
}

/* Capped, because "full width" and "a 1,200px email box" are not the same
   thing. 640px is this file's own measure — .dta-home__panel already uses it
   for the masthead copy — so the form sits on a width the page has already
   established rather than a new one.

   It is also what decides the checkbox columns: at 640px the auto-fit floor of
   240px gives two, which is what was asked for, and one on a phone. Raising
   the cap to give three is a change to this number and nothing else. */
.dta-home__signup-form {
  max-width: 640px;
}

/* ---- 5.1 WPForms output ----------------------------------------------

   REWRITTEN Sept 10, AND THE OLD VERSION WAS LOSING SILENTLY.

   It styled WPForms by naming the same properties WPForms names, at
   `.dta-home__signup button.wpforms-submit` — specificity 0,2,1 — against
   rules in wpforms-full.min.css that run to 0,5,10. Measured on the live page,
   what actually rendered:

     button   Lato / 12px / #066aab / radius 3px      all four lost
     inputs   Lato, radius 3px                        lost
              font-size 16px, border #ececec          ours
     label    font-family                             ours
              font-size 16px                          lost, wants --t-xs

   So the block read as an embedded third-party form because most of it WAS
   one. A stylesheet that looks intentional and does not apply is worse than no
   stylesheet, because it stops anyone looking.

   THE FIX IS NOT MORE SPECIFICITY, IT IS THE OTHER END OF THE SAME RULES.
   WPForms' modern renderer paints from 48 CSS custom properties — its own
   declaration is literally
   `background: var(--wpforms-button-background-color)`. Nothing needs to
   out-rank those rules; they read variables, and the variables are ours to
   set. Colour, radius and size below are all handed over that way, so this
   section contains almost no property WPForms also sets.

   WHY !important ON THE VARIABLES, WHICH IS NOT A HABIT THIS FILE HAS.
   WPForms emits the defaults inline as `<style id="wpforms-css-vars-1135">`
   containing `#wpforms-1135 { ... }` — an ID, specificity 1,0,0. The only ways
   past it are to match with an ID of our own or to mark the declaration
   important. Using `#wpforms-1135` would put the form's numeric id into this
   stylesheet, where dta_home_newsletter_form_id() in inc/home.php is already
   the single answer to which form this is — a second copy that cannot be
   filtered and would go stale silently the day the form is rebuilt. The
   !important is scoped to fifteen custom-property declarations inside
   .dta-home__signup, plus one on the submit's hover background — the only
   ordinary property here that WPForms also sets from a variable it does not
   expose. Sixteen in the file, none outside this block, and none anywhere else
   in the theme.

   NOT OVERRIDDEN, DELIBERATELY: --wpforms-label-error-color (#d63637). The
   palette has no error colour, and --c-accent is a brand red used for links
   and prices — a failed-validation message painted in it would read as
   emphasis rather than as a problem.
   ---------------------------------------------------------------------- */

.dta-home__signup .wpforms-container {
  /* The families are NOT variables — WPForms sets `font-family: inherit` on
     its fields and button, so the family is whatever this container computes.
     One declaration here reaches all of them, and it is why Lato was showing
     through in the first place: nothing was setting it, so it inherited from
     the body. */
  font-family: var(--f-narrow);

  --wpforms-field-border-radius:     var(--radius) !important;
  --wpforms-field-border-color:      var(--c-border) !important;
  --wpforms-field-background-color:  var(--c-surface) !important;
  --wpforms-field-text-color:        var(--c-text-strong) !important;
  --wpforms-field-size-font-size:    var(--t-base) !important;
  --wpforms-field-size-input-height: 44px !important;

  --wpforms-label-color:                 var(--c-text-strong) !important;
  --wpforms-label-size-font-size:        var(--t-xs) !important;
  --wpforms-label-sublabel-color:        var(--c-text) !important;

  --wpforms-button-background-color: var(--c-dark) !important;
  --wpforms-button-border-color:     var(--c-dark) !important;
  --wpforms-button-text-color:       var(--c-text-invert) !important;
  --wpforms-button-border-radius:    var(--radius) !important;
  --wpforms-button-size-font-size:   var(--t-base) !important;

  --wpforms-container-border-radius: var(--radius) !important;
}

.dta-home__signup .wpforms-container,
.dta-home__signup .wpforms-form {
  margin: 0;
  max-width: none;
}

/* The submit is Archivo, not Archivo Narrow — it is a control, and it matches
   the buy button rather than the field labels around it.

   !important, and this one was WRONG for a pass without it. WPForms sets
   `font-family: inherit` on the submit at roughly 0,5,10; this selector is
   0,2,1, so the button quietly took the container's Narrow and the comment
   here claimed Archivo. Measured on the live page after the last upload:
   `"Archivo Narrow"`. The background and radius arrived correctly because
   those go through the variables — only the family, which has no variable,
   was still being fought for on specificity and losing. */
.dta-home__signup button.wpforms-submit {
  font-family: var(--f-sans) !important;
  font-weight: var(--w-semibold);
  cursor: pointer;
}

/* Spacing is the grid's row-gap below, not per-field padding — two sources for
   the same gap is how the block ended up 470px tall.

   !important because this was losing, silently, and it was worth 60px. WPForms
   sets `padding: 15px 0` on every field at a specificity this selector does
   not reach, so each of the two fields carried 30px this rule believed it had
   removed — and the row-gap was added on top, which is the double spacing the
   comment above says it is avoiding. Measured: the email field was 74px around
   a 44px input, and 44px once this actually applied. */
.dta-home__signup .wpforms-field {
  padding: 0 !important;
}

/* WPForms puts 15px under the legend, from its own spacing variable. The
   legend names the checkboxes directly beneath it, so it sits closer to them
   than the fields sit to each other. */
.dta-home__signup .wpforms-field-checkbox legend.wpforms-field-label {
  margin-bottom: var(--s-2) !important;
}

/* ONE WIDTH FOR THE CONTROLS. WPForms sizes fields by class —
   `wpforms-field-large` on the email, `wpforms-field-medium` on the select —
   which rendered 470px and 282px against a 117px button: three ragged edges in
   one column. */
.dta-home__signup .wpforms-field input[type="email"],
.dta-home__signup .wpforms-field input[type="text"],
.dta-home__signup .wpforms-field select {
  width: 100%;
  max-width: none;
}

/* THE FORM IS TWO ROWS, NOT FIVE, AND THAT IS WHERE THE HEIGHT WENT.

   Stacked, it ran email → label → select → button down a single column: 369px
   of form beside 54px of heading at 375px wide, and a 505px band whose height
   was set entirely by the taller column while the other stood empty.

   Email and Subscribe belong on one row — they are one action — and the
   interests belong under them, full width. That is two rows and about a
   hundred and fifty pixels.

   `display: contents` on .wpforms-field-container is what makes it possible:
   the fields are nested one level below the form, and this lets them take part
   in the form's grid without the wrapper becoming a row of its own. Nothing is
   reordered in the DOM, so the tab order is still email → interests →
   Subscribe.

   EVERY CHILD SPANS BY DEFAULT and only the two named ones do not. The form
   also contains a <noscript>, an error div and the honeypot, and a future
   WPForms version may add more. Auto-placing an unexpected child into column 2
   would put it beside the email field; spanning is always survivable. */
.dta-home__signup .wpforms-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s-3);
  row-gap: var(--s-4);
  align-items: end;
}

.dta-home__signup .wpforms-field-container {
  display: contents;
}

.dta-home__signup .wpforms-form > *,
.dta-home__signup .wpforms-field-container > * {
  grid-column: 1 / -1;
}

.dta-home__signup .wpforms-field-email {
  grid-column: 1;
  grid-row: 1;
}

.dta-home__signup .wpforms-submit-container {
  grid-column: 2;
  grid-row: 1;
}

/* THE INTERESTS FIELD, WHICHEVER IT CURRENTLY IS.

   Both selectors are here on purpose and only one of them matches at a time.
   Field 7 is a <select multiple> today and becomes checkboxes when the form is
   rebuilt in the WPForms builder; between those two moments the block should
   not fall apart, and after it the select rules stop matching and can be
   deleted in the next pass. */
.dta-home__signup .wpforms-field-select,
.dta-home__signup .wpforms-field-checkbox {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* Checkboxes in as many columns as fit. auto-fit rather than a stated two:
   the five options are two columns at the form's desktop width and one on a
   phone, and a sixth option needs no edit here — which is the coupling the
   select's row count could not avoid. */
/* WPForms ALREADY GRIDS THIS LIST, and that is what the first version of this
   rule did not know.

   `div.wpforms-container-full .wpforms-field.wpforms-field-checkbox ul` — a
   0,15,10 selector in wpforms-full.min.css — sets `display: grid`,
   `grid-template-columns: repeat(1, auto)` and a gap from its own spacing
   variable. This rule is 0,2,1. It never applied, and the computed style
   looked like it had: `display: grid` was WPForms', with the same value, so
   the one property that mattered read as a success.

   The column count is the field's "Choice Layout" setting in the builder, so
   it could be fixed there instead — one column, two, three or inline. It is
   done here because auto-fit adapts and a stated column count does not: two
   columns is right at the form's width and wrong on a phone, and this way a
   sixth option needs no edit anywhere.

   `display: grid` is kept even though WPForms wins it and agrees: if that rule
   ever changes, this list should still be a grid. It is NOT evidence this rule
   is applying — that was the trap the first time. */
.dta-home__signup .wpforms-field-checkbox ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: var(--s-2) var(--s-5) !important;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* WPForms flexes the row and aligns it to flex-start; only the gap here wins,
   and it is the only one this needs. Nothing is restated. */
.dta-home__signup .wpforms-field-checkbox li {
  gap: var(--s-2);
  margin: 0;
}

/* A step ABOVE the "Interests" legend, not level with it. Both read
   --wpforms-label-size-font-size, which this file sets to --t-xs for field
   labels — correct for the legend, too small for five things a customer is
   being asked to choose between. The choices are the content; the legend names
   them. !important for the same reason as the rest of this block: the rule
   that sets it from that variable is 0,5,10. */
.dta-home__signup .wpforms-field-checkbox label {
  font-family: var(--f-narrow);
  font-size: var(--t-sm) !important;
  line-height: var(--lh-snug);
  color: var(--c-text-strong);
  cursor: pointer;
}

.dta-home__signup .wpforms-field-checkbox input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin: 0;
  accent-color: var(--c-dark);
  cursor: pointer;
}

/* THE INTERESTS LIST, AND THE ONE NUMBER IN THIS FILE THAT IS COUPLED TO
   CONTENT.

   Field 7 is a <select multiple> with five options and no `size` attribute, so
   browsers show four rows and scroll the fifth. `height: auto` does not help —
   a multiple select takes its height from `size`, which is markup WPForms
   owns, not CSS.

   So the row count is stated here, once, and the height is derived from it.
   If the Interests list gains a sixth option this number has to change, and
   that coupling is the argument for the real fix: making field 7 checkboxes in
   the WPForms builder, which sizes itself and reads better besides. Not done
   here because form 1135 is also what the Elementor popup renders, so it is a
   change with a second surface to check. */
.dta-home__signup .wpforms-field select[multiple] {
  --dta-interest-rows: 5;
  height: calc(var(--dta-interest-rows) * var(--t-base) * 1.55 + var(--s-2));
  padding: var(--s-1) var(--s-2);
}

.dta-home__signup input:focus-visible,
.dta-home__signup select:focus-visible,
.dta-home__signup button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.dta-home__signup .wpforms-submit-container {
  padding: 0;
}

.dta-home__signup button.wpforms-submit:hover {
  background: var(--c-darker) !important;
}


/* -------------------------------------------------------------------------
   6. Narrow.
   ---------------------------------------------------------------------- */

@media (max-width: 760px) {
  .dta-home__hero {
    padding: var(--s-6) 0;
  }

  .dta-home__panel {
    padding: var(--s-4) var(--s-5);
    max-width: none;
  }

  .dta-home__panel h1 {
    font-size: var(--t-lg);
  }

  .dta-home__signup-inner {
    gap: var(--s-4);
  }
}