/* Marutaki Communications brand overrides for Moonshot CSS Framework.
   Only the 3 documented brand variables are overridden; everything else
   inherits Moonshot's monochrome base. Palette taken from the real logo
   (assets/img/logo.svg, assets/img/logo-mark.svg) — a green gradient mark.
   The logo's own #00af66 reads at 2.9:1 against white, below WCAG AA for
   text, so the UI green is the same hue stepped down to 5.4:1 (white on it:
   5.4:1). The logo files keep the original. */
:root {
  --ms-brand-primary: #007a48; /* UI green - primary actions, links */
  --ms-brand-secondary: #5b8a72; /* muted sage - secondary accents */
  --ms-brand-accent: #006837; /* deep forest green - hover / active states */
}

/* Moonshot's footer copyright is #6b7280 on #111827 (3.7:1); the footer links
   beside it are already #9ca3af (7.0:1). */
.ms-footer__copyright {
  color: #9ca3af;
}

:root[data-theme="dark"] {
  --ms-brand-primary: #22c98a;
  --ms-brand-secondary: #8fae9c;
  --ms-brand-accent: #3ba379;
}

/* Small utility additions — not part of the vendored Moonshot core,
   used across the site's page content. */
.ms-leading-relaxed {
  line-height: var(--ms-leading-relaxed);
}
.ms-list-disc {
  list-style-type: disc;
}
.ms-list-inside {
  list-style-position: inside;
}

.philosophy-statement {
  font-weight: var(--ms-font-semibold);
}

/* Icon link to an external profile, sitting inline after a person's name.
   Sized and aligned to the surrounding text rather than the icon's own box,
   so it reads as part of the line instead of a floating button. */
.ms-profile-link {
  display: inline-flex;
  align-items: center;
  margin-left: var(--ms-space-2);
  vertical-align: -0.15em;
  color: var(--ms-text-tertiary);
  transition: color 0.2s ease;
}
.ms-profile-link:hover,
.ms-profile-link:focus-visible {
  color: var(--ms-brand-primary);
}

/* Japanese navigation labels must remain words, not narrow vertical stacks.
   At tablet widths the contact button duplicates the contact nav item, so it
   yields its space until the full desktop header fits again. */
.ms-navbar__link {
  white-space: nowrap;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ms-navbar__actions .ms-btn {
    display: none;
  }
}

/* In-page language switch for legal documents. The navbar already has a
   JA/EN toggle, but these pages are often reached by direct link (an app
   store listing, a form, an external reference) where a small navbar
   control is easy to miss — so the alternate language is stated in the
   document itself, above the first clause. */
.ms-lang-switch {
  margin-bottom: var(--ms-space-8);
  padding-bottom: var(--ms-space-4);
  border-bottom: 1px solid var(--ms-border-light);
  font-size: var(--ms-text-sm);
}

/* Layered privacy notices begin with a plain-language answer, visually
   separate from the detailed clauses that follow. The left rule echoes the
   legal pages' existing green link accent without turning the summary into a
   promotional card. */
.ms-policy-summary {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--ms-border-light);
  border-left: 4px solid var(--ms-brand-accent);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-bg-secondary);
}
.ms-policy-summary > :last-child {
  margin-bottom: 0;
}

/* --- Mobile refinements -------------------------------------------------
   Moonshot handles the navbar, footer grid, and .ms-grid-cols-N collapse
   on its own. These cover the site's own hand-written markup, which the
   framework can't reach. Breakpoints match Moonshot's: 768px for grid
   collapse, 767px for component-level mobile rules. */

/* Image-link panels keep their desktop padding on phones. Moonshot's own
   mobile rule is `.ms-image-link__content{padding:2rem}` — a single class,
   so it loses the cascade to `.ms-image-link--xl/--lg .ms-image-link__content`
   (two classes), which set 5rem/3rem. On a 390px screen the XL hero was
   spending 160px of width on padding alone, leaving ~230px for text. These
   rules match that specificity so the text area gets the width back.
   The hero's top padding still clears the ~94px floating navbar. */
@media (max-width: 767px) {
  /* The hero headline's phrases cannot break internally any more, so the type
     has to fit them. 10 full-width characters is the longest phrase: at 7.6vw
     that is 76% of the viewport, inside the 3rem of side padding at every
     width down to 320px. Capped at Moonshot's own 3xl so nothing grows. */
  .ms-image-link--xl.ms-image-link--hero .ms-image-link__title {
    font-size: clamp(1.25rem, 7.6vw, 1.875rem);
  }
  .ms-image-link--xl .ms-image-link__content {
    padding: var(--ms-space-6);
    min-height: 480px;
  }
  .ms-image-link--xl.ms-image-link--hero .ms-image-link__content {
    padding-top: calc(var(--ms-space-6) + 100px);
  }
  .ms-image-link--lg .ms-image-link__content {
    padding: var(--ms-space-6);
    min-height: 340px;
  }
}

/* Japanese display type has no word spaces, so wrapping on width alone cuts
   phrases in half — the headline broke as 「より良いアイデアを形 / にする会社
   です。」. Marking each 文節 keeps the break points at phrase boundaries at
   every width, where a hand-placed <br> can only be right at one.
   `nowrap` is what does the work: inline-block alone is not enough, because an
   inline-block shrink-to-fits into whatever space is left and wraps inside
   itself rather than moving down whole. The trade is that a phrase can no
   longer give way, so the headline size has to follow the viewport — see the
   clamp below — or the longest phrase would overflow on a narrow screen. */
.phrase {
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
  /* Moonshot sets `:lang(ja){line-height:2}` for body copy. A heading escapes
     it because .ms-image-link__title names its own leading, but these spans
     match :lang(ja) directly and were taking the loose value — 120px against
     the headline's 75px, so the three lines drifted apart. Inheriting puts
     each phrase back on whatever leading its heading asked for. */
  line-height: inherit;
}

/* JLREQ line-head 約物 trimming. A full-width opening bracket carries its
   glyph in the right half of its em box: measured in Hiragino Kaku Gothic
   ProN at 60px, 「 starts inking 39.8px into its 60px box against 3.9px for
   そ, so a headline opening on 「 hangs about half a character right of the
   lines under it even though every phrase box is flush at 84px.
   `text-spacing-trim: trim-start` is the property for this, but Chrome 151
   computes it and changes nothing here — its trimming wants an OpenType
   `chws` feature the Hiragino faces do not carry. So the half-width comes off
   by hand, in `em` so it tracks the clamped headline size. 0.5em is the JLREQ
   value and is what other full-width faces (Yu Gothic, Meiryo, Noto Sans JP)
   are cut to as well; Hiragino wants nearer 0.6em, and the ~6px left over at
   the largest size is not worth pinning the rule to one font. */
.phrase--bracket {
  margin-left: -0.5em;
}

/* Long-phrase headlines.
   A `.phrase` cannot break, so a headline is only as small as its widest
   phrase allows — the sizes Moonshot and the mobile clamp above ship were
   right for the copy they were written against and are too large for the
   2026-08-25 redline, which lengthened both home-page headlines:

     hero h1  「暮らし方と働き方の、」 10em → 「その手があったか…！」 12em
     CTA  h2  「はじめませんか。」      8em → 「一緒に話しませんか？」 10em

   Unfixed, the hero ran 23px past its content box at 320px and 97px past it
   at 768px, where Moonshot's fixed 3.75rem takes over from the mobile clamp;
   the CTA ran over at 320-400px and again at 768-1023px.

   Every ceiling below is (measured content width ÷ the phrase's em count) at
   the tightest point of its band:

     hero, phone   21.4px / 320px  = 6.69vw  → 6.6vw
     hero, tablet  49.4px / 768px  = 6.43vw  → 6.3vw   (reaches 3.75rem ~950px)
     CTA,  phone   22.5px / 320px  = 7.03vw  → 6.8vw
     CTA,  768-1023                            flat 3.25rem

   The CTA's tablet band is flat rather than fluid because its content box is
   itself capped at 560px from 800px up, so a vw ceiling there would keep
   growing against a width that has stopped.

   Scoped to a modifier, not to `--hero` / `--center`: five other headlines
   share those and none carries a phrase this long, so they keep the larger
   type. Add `--wide` to a headline only when its longest phrase outgrows the
   default; the numbers above are the way to check. */
@media (max-width: 767px) {
  .ms-image-link--xl.ms-image-link--hero .ms-image-link__title--wide {
    font-size: clamp(1.25rem, 6.6vw, 1.875rem);
  }
  .ms-image-link--xl.ms-image-link--center .ms-image-link__title--wide {
    font-size: clamp(1.25rem, 6.8vw, 1.875rem);
  }
}
@media (min-width: 768px) {
  .ms-image-link--xl.ms-image-link--hero .ms-image-link__title--wide {
    font-size: clamp(2.5rem, 6.3vw, 3.75rem);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ms-image-link--xl.ms-image-link--center .ms-image-link__title--wide {
    font-size: 3.25rem;
  }
}

/* Japanese line breaking.
   Moonshot sets `overflow-wrap: break-word` globally, which is right for
   English — it keeps a long URL from overflowing — but wrong for Japanese:
   it lets a katakana run split anywhere, so 「アプリケーション」 came apart as
   「アプリケ / ーション」 and put a 長音符 at the head of a line, which kinsoku
   forbids. Restoring `normal` lets the browser's Japanese line-breaker do its
   job (the same break moves to 「アプリ / ケーション」), and `strict` applies the
   full kinsoku set rather than the relaxed default.
   Scoped to :lang(ja) so English pages keep break-word. Links opt back in —
   that is where a long unbroken URL would actually appear. */
:lang(ja) {
  overflow-wrap: normal;
  line-break: strict;
  word-break: auto-phrase;
}
:lang(ja) a {
  overflow-wrap: break-word;
}
:lang(ja) :is(h1, h2, h3) {
  text-wrap: balance;
}
:lang(ja) :is(p, li, dd) {
  text-wrap: pretty;
}

/* The hero's text needs a measure, and a column to stand in.
   .ms-image-link__content has no max-width in Moonshot, so it spans the whole
   panel. That failed in two ways. (1) The paragraph ran to the far edge while
   the headline stopped at ~600px, so their right edges drifted apart. (2) The
   navbar caps itself at 1400px and centers, but the panel is full-bleed, so
   on a wide window the copy stayed pinned to the left edge and sat outside
   the navbar's column.
   The content box now follows the navbar's geometry: 1448px = the 1400px
   pill plus the header's 24px inset each side. Below 1448px wide nothing
   moves; above it the copy centers with the navbar and keeps the same ~24px
   offset from the logo it has on narrower screens.
   The measure moves to the children: 38rem ≈ 600px of text — the first
   headline line, 10 full-width characters at 3.75rem — so the body copy
   still lands under the headline instead of running wide. */
.ms-image-link--hero .ms-image-link__content {
  width: 100%;
  max-width: 1448px;
  margin-inline: auto;
}
.ms-image-link--hero .ms-image-link__content > * {
  max-width: 38rem;
}

/* The CTA band whose photograph is the whiteboard carries its copy in dark
   ink, the way a whiteboard actually works. That settled a conflict with no
   other answer: the band read as ominous because it was dark and blue —
   measured at R66 G68 B72, a cast that made the board look grey and dead —
   but brightening it left white text with nothing to sit on.
   The hook is --onlight, not --center. Keying off the layout was wrong:
   .ms-image-link--center is also used by the about page's CTA, whose
   photograph is 12-25% grey, and that band ended up with near-black type on
   near-black ground. The class marks the light photograph, so it travels
   with the image rather than the position. */
/* The 2026-08-25 redline roughly doubled this band's paragraph, and the extra
   lines fall off the lit face of the whiteboard onto its frame and the desk
   below — sampled through the photograph, the dark ink dropped to 3.53:1 at
   375px, 4.32:1 at 768px and 4.42:1 at 1024px against the 4.5:1 AA floor for
   body text. (The headline and the CTA label never fail; they are large or
   they sit high on the board.)
   So the overlay this modifier had switched off comes back as a light one: an
   ellipse of white centred on the copy, opaque enough at the middle to lift
   the frame and the desk, gone by the panel's edge so the room around the
   board is still the photograph. On the board itself it is nearly invisible —
   the lit face measures 217 and the scrim takes it to 231. */
.ms-image-link--onlight .ms-image-link__overlay {
  background: radial-gradient(
    ellipse 78% 64% at 50% 50%,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.44) 48%,
    rgba(255, 255, 255, 0) 80%
  );
}
.ms-image-link--onlight .ms-image-link__title,
.ms-image-link--onlight .ms-image-link__cta {
  color: #141a18;
}
.ms-image-link--onlight .ms-image-link__description {
  color: #3a4441;
}

/* Home hero: a rotating photograph under a horizontal scrim.
   The photographs follow the concept book's account of fire becoming a tool —
   forge, kitchen, workbench, street — so the sequence carries meaning rather
   than being four pictures on a timer.
   An earlier attempt split the hero into a text column and a photo column,
   which left a hard vertical seam down the middle. Here the photograph runs
   the full width and the scrim takes it to solid black under the copy: the
   text still never competes with the image, but the two are one surface.
   The stops are pushed right of the copy's own measure (48rem, so the text
   ends around 690px at a 1440px viewport) — the gradient is still near-opaque
   there and only opens up past it. */
.hero-rot {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-rot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-rot img.is-on {
  opacity: 1;
}
.ms-image-link--hero .ms-image-link__overlay {
  background: linear-gradient(
    90deg,
    #080a09 0%,
    #080a09 32%,
    rgba(8, 10, 9, 0.94) 46%,
    rgba(8, 10, 9, 0.7) 58%,
    rgba(8, 10, 9, 0.3) 72%,
    rgba(8, 10, 9, 0.06) 86%,
    rgba(8, 10, 9, 0) 100%
  );
}
/* The ring is the logo mark itself, turning slowly behind the copy.
   It replaces a generated lattice that was amber — which contradicted the
   image direction's one rule, that green is the only saturated colour on the
   site. Using the mark instead means the colour is correct by definition, the
   form matches the concept book ("探究、体系化、発明は、直線ではなく循環です"),
   and it costs a 6KB vector rather than a 375KB photograph.
   Oversized and bled off the left edge so it reads as a graphic device rather
   than a second logo. */
.hero-ring {
  position: absolute;
  left: -14%;
  top: 50%;
  width: 46rem;
  height: 46rem;
  margin-top: -23rem;
  opacity: 0.16;
  z-index: 2;
  pointer-events: none;
  animation: hero-ring-spin 20s linear infinite;
}
@keyframes hero-ring-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ring {
    animation: none;
  }
}
/* WCAG 2.2.2: anything that moves for more than five seconds needs a way to
   stop it. The owner asked for no button in the hero, so it is clipped out of
   sight like the skip link and surfaces only on keyboard focus — the required
   mechanism stays reachable without putting chrome over the photograph.
   `clip-path` rather than `display: none`, which would drop it from the tab
   order and take the mechanism with it. Rotation also stops on hover and on
   focus anywhere inside the hero; see hero.js.
   Revealed on `:focus`, not `:focus-visible`, matching Moonshot's own
   `.ms-skip-link` — and safer here, because a clipped element has no hit area,
   so no pointer can ever focus it and there is no mouse case to exclude. */
.hero-pause {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  font-size: var(--ms-text-xs);
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid hsla(0, 0%, 100%, 0.2);
  border-radius: 999px;
  padding: 0.5em 0.9em;
  cursor: pointer;
  clip-path: inset(50%);
  opacity: 0;
  transition:
    opacity 0.2s ease,
    border-color 0.2s ease;
}
.hero-pause:focus {
  clip-path: none;
  opacity: 1;
  border-color: hsla(0, 0%, 100%, 0.5);
}
/* On a phone the copy fills the width, so the scrim has to come from the
   bottom instead of the side. */
@media (max-width: 767px) {
  .ms-image-link--hero .ms-image-link__overlay {
    background: linear-gradient(
      180deg,
      rgba(8, 10, 9, 0.4) 0%,
      rgba(8, 10, 9, 0.82) 46%,
      #080a09 100%
    );
  }
  .hero-ring {
    left: auto;
    right: -30%;
    top: 30%;
    width: 26rem;
    height: 26rem;
    margin-top: -13rem;
    opacity: 0.13;
  }
}

/* Home hero button row. Moonshot stacks .ms-hero__actions full-width on
   mobile, but this hero is an .ms-image-link, so it needs its own rule.
   Left-aligned rather than centered, matching the hero's text. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-4);
  margin-top: var(--ms-space-6);
}
@media (max-width: 767px) {
  .hero-actions {
    flex-direction: column;
    width: 100%;
  }
  .hero-actions .ms-btn {
    width: 100%;
  }
}

/* Panel titles are given a min-height so adjacent cards align on desktop.
   Once the grid collapses to one column that only adds dead space. */
.panel-title--2l {
  min-height: 2.6em;
}
.panel-title--3l {
  min-height: 3.9em;
}
.ms-image-link--lg .service-pillar-title {
  min-height: 2.8em;
  font-size: clamp(1.625rem, 2vw, 2rem);
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.service-pillar-action {
  display: inline-block;
  margin-top: 0.2em;
  font-size: 0.76em;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.service-pillar-copy {
  min-height: 3.3em;
  line-height: 1.65;
  text-wrap: pretty;
}
.service-story-panel .ms-image-link__content {
  min-height: 360px;
}
.ms-image-link--lg .service-story-title {
  max-width: 13em;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.35;
}
.service-flow {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--ms-border-light);
  border-radius: 1rem;
  background: var(--ms-bg-secondary);
}
.service-flow .ms-flow__step {
  padding-inline: 0.5rem;
}
.service-flow .ms-flow__number {
  box-shadow: 0 0 0 0.5rem rgba(0, 175, 102, 0.08);
}
.service-flow .ms-flow__title {
  text-wrap: balance;
}
.service-flow .ms-flow__description {
  line-height: 1.65;
  text-wrap: pretty;
}
.service-card-icon {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--ms-space-5);
  padding: 0.65rem;
  color: var(--ms-brand-accent);
  background: rgba(0, 175, 102, 0.08);
  border: 1px solid rgba(0, 175, 102, 0.18);
  border-radius: 0.75rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 768px) {
  .panel-title--2l,
  .panel-title--3l,
  .ms-image-link--lg .service-pillar-title {
    min-height: 0;
  }
  .service-pillar-copy {
    min-height: 0;
  }
  .service-story-panel .ms-image-link__content {
    min-height: 320px;
  }
  .service-flow .ms-flow__step {
    display: grid;
    grid-template-columns: 2rem 1fr;
    column-gap: 1rem;
    padding-inline: 0;
    text-align: left;
  }
  .service-flow .ms-flow__number {
    grid-row: 1 / 3;
    margin: 0;
  }
}
@media (max-width: 359px) {
  .ms-card .ms-heading-5 {
    font-size: 1.125rem;
  }
}

/* Company info table: label/value side by side is too narrow on a phone,
   so stack them into rows instead. */
@media (max-width: 767px) {
  .company-table th,
  .company-table td {
    display: block;
    width: auto !important;
    padding: 0 !important;
  }
  .company-table th {
    padding-top: var(--ms-space-4) !important;
    padding-bottom: var(--ms-space-1) !important;
  }
  .company-table td {
    padding-bottom: var(--ms-space-4) !important;
  }
}

/* The footer sat in a different box from the rest of the site. Moonshot steps
   .ms-container's max-width and gutters through five breakpoints, but gives
   .ms-footer__container a flat 1440px and 1rem — so the footer ran wider than
   the body above it and reached the screen edge. Hardcoding one width did not
   fix it either: the two only agree at some viewports. Mirroring the same
   ladder keeps the footer aligned with every section at every width. */
.ms-footer__container {
  max-width: none;
}
@media (width >= 640px) {
  .ms-footer__container {
    max-width: var(--ms-max-width-sm);
  }
}
@media (width >= 768px) {
  .ms-footer__container {
    max-width: var(--ms-max-width-md);
    padding-left: var(--ms-space-6);
    padding-right: var(--ms-space-6);
  }
}
@media (width >= 1024px) {
  .ms-footer__container {
    max-width: var(--ms-max-width-lg);
    padding-left: var(--ms-space-8);
    padding-right: var(--ms-space-8);
  }
}
@media (width >= 1280px) {
  .ms-footer__container {
    max-width: var(--ms-max-width-xl);
  }
}
@media (width >= 1440px) {
  .ms-footer__container {
    max-width: var(--ms-max-width-2xl);
  }
}

/* Footer columns.
   Moonshot spreads the sections with repeat(auto-fit, minmax(200px, 1fr)), so
   all four take an equal 316px at 1440px wide — including the two that hold a
   single link each. The link groups drifted apart with nothing between them.
   Sizing the three text columns to their content pulls them into one group and
   hands the slack to the logo, which is already ranged right. */
@media (min-width: 768px) {
  .ms-footer__grid {
    grid-template-columns: auto auto auto 1fr;
    gap: var(--ms-space-16);
  }
}

/* Footer logo plate.
   The footer is #111827, and while the reversed wordmark reads well on it,
   the mark's greens (#00af66 / #006837) are dark themselves and go muddy.
   Rather than invent brighter brand colours for dark backgrounds, the logo
   sits on a light plate — the surface it was drawn for — so the mark keeps
   its designed colour and the whole lockup gains a clear edge. */
.ms-footer__logo {
  display: inline-flex;
  /* .ms-footer__section is a flex column, so align-self sets the horizontal
     edge. flex-start left it 134px short of its column's right edge — which is
     also the footer's right edge, so the lockup read as floating in the middle
     of nothing. The other columns are ranged left against their own start; the
     last one has to range right for the footer to close. */
  align-self: flex-end;
  align-items: center;
  background: #fdfdfb;
  /* The two ends of the lockup are different shapes, so equal padding does not
     look equal. On the left the mark is a circle: it meets the edge at a single
     point, so it reads as having air even when it sits close. On the right the
     wordmark ends on an upright letter, a full-height straight edge that presses
     against the boundary. The flat side therefore needs more room than the round
     one — the reverse of what was here before. The PNG carries no transparent
     margin of its own, so these numbers are the whole of the spacing. */
  padding: 0.85rem 1.5rem 0.85rem 1.1rem;
  border-radius: 12px;
  margin-bottom: var(--ms-space-4);
}
/* Footer headings are h2 so the outline doesn't jump h2 → h4; the class
   already resets size/weight/colour, this pins the rest of the h4 look. */
.ms-footer .ms-footer__heading {
  line-height: var(--ms-leading-snug);
  text-wrap: initial;
}
.ms-footer__logo img {
  height: 40px;
  width: auto;
  display: block;
}
/* Once the footer grid collapses to one column there is no right edge to
   close, so the lockup goes back to ranging left with everything else. */
@media (max-width: 767px) {
  .ms-footer__logo {
    align-self: flex-start;
  }
}

/* Hero buttons: icon support and a pill shape.
   Moonshot ships .ms-btn__icon but sets no spacing, so the gap lives here.
   Buttons without an icon have a single child and are unaffected by gap.
   The pill matches the navbar's own rounded pill, so the two read as one
   family rather than two button styles on the same screen. */
.ms-btn {
  gap: 0.55em;
}
/* Slightly less padding on the icon side than the label side, so the two
   ends of the pill look even — the icon carries less visual weight than a
   glyph run. Moonshot's spacing scale skips 7 (…5, 6, 8, 10…); an undefined
   token makes the declaration invalid and padding falls back to 0, which is
   how the icon ended up flush against the edge. */
.hero-actions .ms-btn {
  border-radius: 999px;
  padding-left: var(--ms-space-8);
  padding-right: var(--ms-space-6);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}
.hero-actions .ms-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(10, 20, 15, 0.28);
}
.hero-actions .ms-btn .ms-btn__icon svg {
  width: 1.05em;
  height: 1.05em;
}
/* the arrow leans forward on hover; the mail icon stays put */
.hero-actions .ms-btn--primary .ms-btn__icon {
  transition: transform 0.18s ease;
}
.hero-actions .ms-btn--primary:hover .ms-btn__icon {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .hero-actions .ms-btn,
  .hero-actions .ms-btn .ms-btn__icon {
    transition: none;
  }
  .hero-actions .ms-btn:hover {
    transform: none;
  }
}