/* ---------------------------------------------------------------------------
   Responsive layer for the WhyRomania canvas export.

   The artboards are canvas exports: no classes, everything is an inline style
   attribute. So overrides here are keyed off inline-style substrings and need
   !important to beat the inline declarations. Match the RUNTIME-normalised
   attribute text (support.js rewrites it, e.g. "inset: 0px"), not the source.

   Do NOT put overflow-x:hidden on html/body: #section-hero uses position:sticky
   and an overflow container on an ancestor silently kills sticky.
--------------------------------------------------------------------------- */

/* 1. Cover-video wrappers clip their own iframe.
      The map iframes are deliberately oversized (min-width:177.78vh, i.e. 16:9
      relative to viewport HEIGHT) so the video always covers the box. The hero
      wrapper already has overflow:hidden; the masked map wrapper does not, so
      at phone/tablet widths that 1600px iframe drags the whole page sideways
      (page measured 995px wide at a 390px viewport). Masking is paint-time
      only and never clips layout, so the clip has to be explicit. */
div[style*="mask-image"] {
  overflow: hidden !important;
}

/* 2. Phone: hero copy no longer clipped.
      The hero box was a fixed height (100vh - 130px) with overflow:hidden, and
      the copy block inside is absolutely positioned against bottom:0, so it
      grows upward. On a phone the intro wraps to more lines and the block got
      taller than the box (725px vs 571px on an iPhone SE), so the top line was
      cut off. Fix: let the box grow to fit its copy (height:auto + min-height)
      and put the copy back in normal flow so it actually contributes height.
      The box becomes a flex column justified to the end, which keeps the
      bottom-anchored look on taller phones where the copy is shorter than the
      box. The video layer stays position:absolute inset:0, so it still covers.
      svh keeps this stable as mobile browsers show/hide their URL bar; the vh
      line above it is the fallback for older engines. */
@media (max-width: 767px) {
  #section-hero > div {
    height: auto !important;
    min-height: calc(100vh - 96px) !important;
    min-height: calc(100svh - 96px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }
  #section-hero > div > div[style*="z-index: 2"] {
    position: relative !important;
    bottom: auto !important;
  }
  #section-hero > div > div[style*="z-index: 2"] > div:first-child {
    padding-bottom: 16px !important;
  }
}

/* ===========================================================================
   Homepage, phone only (<=767px). Desktop and tablet are untouched.
   =========================================================================== */
@media (max-width: 767px) {

  /* --- Hero copy, restructured along the lines of Location.dc -------------
     Location's hero reads as a hierarchy: small eyebrow, one big bold line,
     then a single calm paragraph. The homepage instead had four <p> all at the
     same 21px, so on a phone they broke into eight ragged lines with no focal
     point. Same content, given that hierarchy: line 1 becomes the headline,
     lines 2-3 flow together as one paragraph (they are one sentence), line 4
     stays as the closing statement.
     The container is display:flex on desktop, and flex blockifies its children
     - "display: inline" on a flex item computes to block - so it has to become
     a block box here for lines 2 and 3 to flow into a single paragraph. */
  [data-hero-copy] {
    display: block !important;
    padding: 0 20px 22px !important;
    max-width: 460px !important;
    margin: 0 auto !important;
  }
  [data-hero-copy] img {
    height: 54px !important;
    margin: 0 auto 18px !important;
  }
  [data-hero-copy] p:nth-of-type(1) {
    font-family: 'Sarabun', sans-serif !important;
    font-size: clamp(21px, 6.2vw, 26px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 12px !important;
  }
  /* one sentence, so let it wrap as one paragraph instead of two fixed lines */
  [data-hero-copy] p:nth-of-type(2),
  [data-hero-copy] p:nth-of-type(3) {
    display: inline !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }
  [data-hero-copy] p:nth-of-type(4) {
    display: block !important;
    margin: 14px 0 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  /* Header nav rules. These lived in each page's own <style>, so pages that
     did not carry a copy (Destinations, now that it uses the same header)
     never got them. Shared here instead. */
  [data-nav-social] { display: none !important; }
  [data-menu-dropdown] {
    left: auto !important;
    right: -56px !important;
    width: min(280px, calc(100vw - 32px)) !important;
  }

  /* --- Hero quick links: three across, not stacked --------------------
     The row is flex-wrap:wrap, and each link's own padding plus its 22px
     title gave it a min-content width wider than a third of the screen, so
     all three wrapped onto separate lines. Letting them share the row
     equally (flex:1 1 0 + min-width:0, which releases the automatic
     min-content floor on a flex item) and scaling the type down keeps them
     side by side. */
  [data-hero-quicklinks] {
    flex-wrap: nowrap !important;
    padding: 18px 6px 20px !important;
  }
  /* The three items are <a> now that they navigate, so these are matched on
     "> *" rather than "> div" - keyed to the element name they went dead the
     moment the links became anchors. */
  [data-hero-quicklinks] > * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 8px 6px !important;
    margin: 0 !important;
    border-radius: 10px !important;
  }
  [data-hero-quicklinks] > * > div:nth-child(1) {
    font-size: 9px !important;
    line-height: 1.5 !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 5px !important;
  }
  [data-hero-quicklinks] > * > div:nth-child(2) {
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin-bottom: 3px !important;
  }
  [data-hero-quicklinks] > * > div:nth-child(3) {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  /* Location hero headline matches the homepage headline exactly. Its own
     clamp bottomed out at 32px on a phone, against 24px on the homepage. */
  [data-loc-headline] {
    font-size: clamp(21px, 6.2vw, 26px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 12px !important;
  }

  /* Hero description matched to the homepage body copy. Left at 18px it read
     larger than the 24px headline above it - the same imbalance the headline
     change was meant to remove. */
  [data-loc-hero-desc] {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin: 0 0 18px !important;
  }

  /* --- About: stack the meta line, ABOUT above ROMANIA, centred ----------- */
  [data-about-meta] {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center !important;
  }
  [data-about-meta] > span:nth-child(1) { order: 2 !important; } /* ROMANIA, EST. 2024 */
  [data-about-meta] > span:nth-child(2) { order: 1 !important; } /* ABOUT */

  /* --- Destinations: no fixed background ---------------------------------
     background-attachment:fixed is effectively broken on mobile Safari and
     Chrome Android - the image is sized to the viewport rather than the
     element, so it renders zoomed and misaligned and never parallaxes. */
  [data-dest-bg] {
    background-attachment: scroll !important;
  }

  /* --- Interactive map: bigger Romania ------------------------------------
     The silhouette is ~1.46:1 but sat in a 4:3 frame, so mask-size:contain
     matched it by width and left dead space top and bottom. Narrowing the
     frame to 3:2 lets the same shape fill far more of the screen, and the
     reduced side padding buys it more width still. No cropping - contain
     still fits the whole outline. */
  [data-map-frame] {
    aspect-ratio: 123 / 84 !important;
  }
  section:has(> div > [data-map-frame]) {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* --- Destinations strip actually scrolls -----------------------------
     [data-dest-row] is switched to flex-direction:column on phones but keeps
     its inline align-items:center. In a column flex box, center means children
     are sized to their content instead of stretched, so the scroller's wrapper
     took the full width of all five cards - 1014px inside a 342px row. That
     made scrollWidth === clientWidth, so there was nothing to scroll and the
     strip was dead. Stretching the children puts the wrapper back at the row
     width and lets the cards overflow, which is what makes it scrollable. */
  [data-dest-row] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  [data-dest-sidebar] {
    width: 100% !important;
  }

  /* --- Map copy fits inside the silhouette ------------------------------
     The copy is centred in the frame's bounding box, but the shape it has to
     live in is an outline, not a rectangle - the usable width narrows sharply
     towards the top and bottom. At full size the heading and paragraph ran out
     past the coastline. Pull the whole block into the shape's inner area and
     scale the type to match. */
  [data-map-copy] {
    padding: 0 21% !important;
  }
  [data-map-copy] > div:first-child {      /* "Explore Romania" label */
    font-size: 10px !important;
    margin-bottom: 3px !important;
  }
  [data-map-copy] h2 {
    font-size: 16px !important;
    line-height: 1.18 !important;
    margin: 0 0 7px !important;
    max-width: 100% !important;
  }
  [data-map-copy] p {
    font-size: 10px !important;
    line-height: 1.4 !important;
    margin: 0 0 10px !important;
    max-width: 100% !important;
  }
  [data-map-copy] a {
    font-size: 11px !important;
    padding: 8px 16px !important;
  }

  /* --- Footer menu columns fit a 360px screen -------------------------
     Five flex columns each with a 150px+ min-width collapse to one stacked
     list on a phone, which ran the footer past 1400px tall. A two-up grid
     halves that. */
  [data-footer-nav] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 20px !important;
  }

  [data-footer-nav] > div {
    min-width: 0 !important;
  }

  /* The newsletter is the last of the footer columns; half a 360px screen is
     not enough for its fields, so it takes the full row. */
  [data-footer-newsletter] {
    grid-column: 1 / -1 !important;
    max-width: none !important;
  }

  /* The hora motif is sized for the wide card; on a phone it would sit behind
     the whole column stack, so it covers the top band only. */
  [data-footer-hora] {
    width: 100% !important;
    height: 220px !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%) !important;
    mask-image: linear-gradient(180deg, #000 0%, transparent 100%) !important;
  }

  /* --- Footer wordmark, dialled back -------------------------------------- */
  [data-footer-logo] {
    width: 180px !important;
  }
}

/* ===========================================================================
   Footer hover, every width.
   Every footer element is inline-styled, and an inline style outranks any
   selector, so these all need !important to land. White text links go to the
   site red; the fine print is already red, so it underlines instead; the
   filled controls and the social discs deepen.
   =========================================================================== */
[data-site-footer] a,
[data-site-footer] button {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

[data-footer-nav] a:hover {
  color: #BC202D !important;
}

[data-site-footer] a[href="/privacy"]:hover,
[data-site-footer] a[href="/terms"]:hover,
[data-site-footer] a[href="/privacy#cookies"]:hover,
[data-site-footer] a[href^="mailto:"]:hover,
[data-site-footer] a[href*="kristofszatmari"]:hover {
  color: #BC202D !important;
  text-decoration: underline !important;
}

[data-site-footer] a[aria-label]:hover {
  background: #96181F !important;
}

[data-site-footer] [data-newsletter] input:focus {
  outline: none;
  border-color: #BC202D !important;
}

/* ===========================================================================
   Map page, phone only (<=767px).
   =========================================================================== */
@media (max-width: 767px) {

  /* --- Region filters: one draggable line ------------------------------
     Seven pills with flex-wrap:wrap and max-width:90vw stacked into four
     rows. One row that scrolls sideways instead - touch-drag on a phone,
     with the scrollbar hidden so it still reads as a pill bar. */
  [data-region-filters] {
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    max-width: calc(100vw - 32px) !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  [data-region-filters]::-webkit-scrollbar { display: none; }
  [data-region-filters] > button { flex: 0 0 auto !important; }

  /* Top row: Back pill, then the filters beside it. All three things that
     live up here - the Back pill, the filter bar and Mapbox's own zoom
     control - were overlapping each other at 390px. The zoom buttons go
     (pinch works on touch, and they sat underneath the opaque Back pill
     anyway), and the filter bar starts to the right of Back instead of being
     centred across the whole width. */
  .mapboxgl-ctrl-top-left { display: none !important; }
  div:has(> [data-region-filters]) {
    left: 112px !important;
    right: 16px !important;
    transform: none !important;
  }
  [data-region-filters] { max-width: 100% !important; }

  /* --- Detail panel becomes a bottom sheet ------------------------------
     It was top:20 right:20 bottom:20 at min(400px, 100vw-40px), which on a
     phone is a 350px-wide card covering nearly the whole screen - you landed
     on the panel and never saw the map. Now it sits across the bottom at 46%
     height, so the map owns the top half and stays pannable, and it slides
     out of the way until a pin is tapped. */
  [data-map-panel] {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 56vh !important;
    border-radius: 20px 20px 0 0 !important;
    border-bottom: none !important;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.18) !important;
    transition: transform 0.28s ease !important;
    will-change: transform;
  }
  [data-map-panel][data-open="false"] {
    transform: translateY(100%) !important;
    pointer-events: none !important;
  }
  [data-map-panel][data-open="true"] {
    transform: translateY(0) !important;
  }
  [data-panel-close] { display: flex !important; }

  /* The prev / counter / next row sat flush against the bottom of the screen,
     colliding with the browser's own bottom bar and the home indicator. Lift
     it, and add the safe-area inset on top for notched devices. */
  [data-map-panel] > div:last-child {
    padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* The photo is a flex item with an aspect-ratio, so when the card runs out
     of room it is the thing that gets squashed - it was collapsing to 92px.
     Pin it to a real height and stop it shrinking. */
  /* The photo is the flexible one. Priority on a short screen is heading,
     description and CTA intact; the picture gives up height first, down to a
     floor of 84px. It carries an aspect-ratio in the markup, which is what let
     it collapse to 92px before - that is reset here so height alone drives it. */
  [data-map-photo] {
    flex: 0 1 auto !important;
    aspect-ratio: auto !important;
    height: clamp(96px, 17vh, 160px) !important;
    min-height: 84px !important;
    margin-bottom: 14px !important;
  }

  /* Keep the CTA on screen no matter how short the viewport is.
     The card is a fixed-height flex column with overflow:hidden, so anything
     that does not fit is simply cut - and the Explore button, being last, was
     the thing cut. A flex item will not shrink below its content unless
     min-height:0 says it may, so the description is made the flexible one and
     the button is pinned. On a short screen the description loses a line
     rather than the CTA disappearing. */
  [data-map-desc] {
    flex: 0 0 auto !important;
    margin-bottom: 12px !important;
  }
  [data-map-cta] {
    flex: 0 0 auto !important;
  }

  [data-map-panel] h3 {
    font-size: 19px !important;
    margin: 0 0 8px !important;
  }
  [data-map-panel] p { margin-bottom: 8px !important; }
  [data-map-panel] [style*="font-size: 15px"] {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
}

/* Safety net for very short viewports only - landscape, or a small phone with
   a lot of browser chrome. Above this height the card stays absolutely
   positioned, which is what gives the description a fixed-height flex context
   to shrink inside, and everything fits without scrolling. Below it the photo,
   label, heading and button alone already exceed the box, so there is nothing
   left to shrink: put the card back in normal flow and let the body scroll,
   which keeps the CTA reachable instead of cut off. */
@media (max-width: 767px) and (max-height: 660px) {
  [data-map-body] {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  [data-map-body] > div {
    position: static !important;
  }
}

/* Carousel left arrows, every width. The markup hides them and
   _syncCarouselArrow fades one in once its strip has been scrolled or dragged
   off the start, so it only ever appears when there is something to go back
   to. This lived in the phone block, which left desktop with a right arrow
   and no way back. */
[data-carousel-prev] {
  display: flex !important;
}

/* ===========================================================================
   Destinations page.
   =========================================================================== */

/* The header is now position:fixed (ported from the homepage), so the first
   block has to clear it at every width, not just on phones. */
[data-page-top] {
  padding-top: 92px !important;
}

@media (max-width: 767px) {

  /* --- Region filters: one draggable row --------------------------------
     Nine 90px tiles with 76px icons and flex-wrap:wrap stacked into rows and
     ate most of the first screen. One row that scrolls sideways instead, with
     the icons scaled down so more than two fit at a time. */
  [data-region-icons] {
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    gap: 14px !important;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  [data-region-icons]::-webkit-scrollbar { display: none; }
  [data-region-icons] > div {
    flex: 0 0 auto !important;
    width: 66px !important;
    gap: 6px !important;
  }
  [data-region-icons] img {
    width: 52px !important;
    height: 52px !important;
  }
  [data-region-icons] span {
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-align: center;
  }

  /* --- Destination cards: bigger tiles, smaller captions -----------------
     Two columns at 24px page padding and a 20px gap left 161px tiles carrying
     a 17px caption, which is why they read as cramped. Trimming the padding
     and gap buys real width back, and the caption drops to a size that suits
     the tile. */
  [data-cards-grid] {
    padding-left: 14px !important;
    padding-right: 14px !important;
    gap: 12px !important;
  }
  [data-cards-grid] > a > p {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }
}

/* ===========================================================================
   Bento cards: full-bleed image on tablet and phone.

   BentoCardFull puts its photo at inset:0 with the copy overlaid on a scrim.
   BentoCard instead is a white card with the photo boxed to 140px at the top
   and dark copy beneath. Below 1024px every card takes the Full treatment, so
   the grid reads as one thing rather than one photo-card among white ones.
   Desktop is untouched.
   =========================================================================== */
@media (max-width: 1024px) {
  /* The wrapper dc-import renders around the component is a plain block with
     auto height, so the card's own height:100% was resolving against its own
     content (159px) instead of the 340px grid cell. Stretch the wrapper. */
  div:has(> [data-bento-card]) {
    height: 100% !important;
  }

  [data-bento-card] {
    position: relative !important;
    background: transparent !important;
    border: none !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  /* the photo wrapper stops being a 140px box and fills the card */
  [data-bento-card] > div:first-child {
    position: absolute !important;
    inset: 0 !important;
    height: auto !important;
    border-radius: 16px !important;
    z-index: 0 !important;
  }

  /* same scrim BentoCardFull uses, so overlaid copy stays readable */
  [data-bento-card]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.05) 55%);
    z-index: 1;
    pointer-events: none;
  }

  [data-bento-card] > *:not(:first-child) {
    position: relative !important;
    z-index: 2 !important;
  }

  /* label pill matches Full's: white on the photo rather than tinted on white */
  [data-bento-card] > div:nth-child(2) {
    align-self: flex-start !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #1E1E1E !important;
    border-color: transparent !important;
  }

  /* copy flips to white, and the min-heights that reserved space in the white
     card layout are dropped so the block hugs the bottom */
  [data-bento-card] h4 {
    color: #fff !important;
    min-height: 0 !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
  }
  [data-bento-card] p {
    color: rgba(255, 255, 255, 0.85) !important;
    min-height: 0 !important;
    line-height: 1.5 !important;
    -webkit-line-clamp: 2 !important;
  }
  [data-bento-card] a {
    align-self: flex-start !important;
    background: #fff !important;
    border-color: #fff !important;
    color: #1E1E1E !important;
  }
}

/* ===========================================================================
   Footer menu columns, tablet (768px - 1023px).
   Five flex columns wrap 3 + 2 and, because flex sizes each row to its own
   tallest item, the second row starts a long way below the first. A three-up
   grid lines the columns up and keeps the newsletter in the same cell it has
   on desktop.
   =========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  [data-footer-nav] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px 24px !important;
  }

  [data-footer-nav] > div {
    min-width: 0 !important;
  }

  [data-footer-newsletter] {
    grid-column: 1 / -1 !important;
    max-width: 360px !important;
  }
}


/* ===========================================================================
   button-029 - the shared CTA button
   ---------------------------------------------------------------------------
   One definition for every text CTA on the site: Donate, Explore the map,
   All destinations, Send, Subscribe. A white fill wipes in from the trailing
   edge on hover and the label flips to red.

   Colours are the site's own literals, not the design-system tokens: that
   sheet still carries the abandoned green identity (--accent: #2e6b4f), and
   legal.css redefines --accent to red for its own pages, so the same variable
   name means two different colours depending on which page you are on. Both
   are avoided here on purpose.

   The focus ring is white rather than the reference's black: every CTA on
   this site sits on the #15161A ground, where black is invisible.

   Hover is gated behind (hover: hover) and (pointer: fine), so a touch device
   gets the plain red button and no stuck hover state, and behind
   prefers-reduced-motion: no-preference.
   =========================================================================== */
:root {
  --button-029-color: #ffffff;
  --button-029-color-background: #BC202D;
  --button-029-hover-color: #BC202D;
  --button-029-hover-color-background: #ffffff;
  --button-029-color-focus: #ffffff;
  --button-029-padding: 0.75em 1em;
  --button-029-border-radius: 2.5em;
  --button-029-focus-inset: -0.125em;
  --button-029-click-scale: 0.955 0.925;
  --button-029-clip-path: inset(0 100% 0 0 round 0 0.75em 0.75em 0);
  --button-029-clip-path-hover: inset(0 0 0 0 round 0);
  --button-029-ease-click: cubic-bezier(0.4, 0, 0.2, 1);
  --button-029-ease-hover: cubic-bezier(0.32, 0.72, 0, 1);
  --button-029-ease-focus: cubic-bezier(0.32, 0.72, 0, 1);
}

.button-029 {
  -webkit-user-select: none;
  user-select: none;
  background-color: #0000;
  outline-style: none;
  border: none;
  padding: 0;
  line-height: 1;
  text-decoration: none;
  display: inline-grid;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: scale 0.15s var(--button-029-ease-click);
}

.button-029::after {
  content: '';
  display: block;
  position: absolute;
  inset: var(--button-029-focus-inset);
  border-radius: var(--button-029-border-radius);
  transition: box-shadow 0.3s var(--button-029-ease-focus);
  pointer-events: none;
  z-index: 1;
}

.button-029:is(:focus-visible)::after {
  box-shadow: 0 0 0 0.125em var(--button-029-color-focus);
}

.button-029:active {
  scale: var(--button-029-click-scale);
}

.button-029__inner {
  grid-area: 1 / 1;
  place-items: center;
  width: 100%;
  height: 100%;
  display: grid;
}

.button-029__default {
  width: 100%;
  height: 100%;
  color: var(--button-029-color);
  grid-area: 1 / 1;
  display: grid;
}

.button-029__default-bg {
  background-color: var(--button-029-color-background);
  border-radius: var(--button-029-border-radius);
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  padding: 0;
}

.button-029__default-inner,
.button-029__hover-inner {
  grid-column-gap: .125em;
  grid-row-gap: .125em;
  width: 100%;
  height: 100%;
  padding: var(--button-029-padding);
  grid-area: 1 / 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.button-029__hover {
  color: var(--button-029-hover-color);
  grid-area: 1 / 1;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  display: grid;
  clip-path: var(--button-029-clip-path);
  transition: clip-path 0.5s var(--button-029-ease-hover);
}

.button-029__hover-bg {
  border-radius: var(--button-029-border-radius);
  background-color: var(--button-029-hover-color-background);
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  padding: 0;
}

.button-029__icon {
  flex: none;
  width: .75em;
  height: .75em;
}

/* A disabled submit button (partner-form.js dims it while sending) must not
   invite a hover it cannot honour. */
.button-029:disabled {
  cursor: default;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button-029:is(:hover, :focus-visible) .button-029__hover,
  [data-hover]:is(:hover, :focus-visible) .button-029 .button-029__hover {
    clip-path: var(--button-029-clip-path-hover);
    transition: clip-path 0.55s 0.05s var(--button-029-ease-hover);
  }
  .button-029:disabled .button-029__hover {
    clip-path: var(--button-029-clip-path);
  }
}