/* ==========================================================================
   matter® — Final homepage, built 1:1 from Figma "MATTER WEB DRAFT 4",
   frame Home (41:3565, 1440×6157). The system (fonts, tokens, reset, nav,
   wrap) loads first from css/matter.css. Everything here keeps the hm- prefix.

   All px values are the frame's own. The page column is 1440 with 47px guts;
   inner content column is 1346.
   ========================================================================== */

body { font-weight: 400; }

/* the standard pill button — 33 tall, r60, 17px */
.hm-pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 33px; padding: 0 21px; border-radius: 60px; border: 1px solid var(--ink);
  font-size: 17px; letter-spacing: -0.01em; white-space: nowrap;
  transition: background .22s var(--ease), color .22s var(--ease);
}
.hm-pill:hover { background: var(--ink); color: #fff; }
.hm-pill--onphoto { border-color: #fff; color: #fff; background: transparent; }
.hm-pill--onphoto:hover { background: #fff; color: var(--ink); }

/* nav pill carries a hairline in this draft */
.hm-nav__pill { border: 1px solid #e5e5e5; }
.mtr-nav__l a, .mtr-nav__loc { font-weight: 350; }

/* ===========================================================================
   HERO — 1440×839 photograph, 50% black veil, centred stack at the bottom
   =========================================================================== */

.hm-hero { position: relative; height: 839px; min-height: 560px; max-height: 100vh; overflow: hidden; }
.hm-hero__bg { position: absolute; inset: 0; }
.hm-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hm-hero__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.hm-hero__in {
  position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 48px;
  display: grid; justify-items: center; gap: 36px; color: #fff; text-align: center;
}
.hm-hero__h {
  font-family: var(--s); font-weight: 200; font-size: clamp(34px, 3.82vw, 55px);
  line-height: 1.1; letter-spacing: 0;
}
.hm-hero__h em { font-style: italic; font-weight: 200; }

/* ===========================================================================
   REVIEW BAR — 60 tall, hairlines top and bottom, marquee on the right
   =========================================================================== */

.hm-rb { margin-top: 32px; border-block: 1px solid #dcdcdc; padding-block: 20px; overflow: hidden; }
.hm-rb__in { display: flex; align-items: center; gap: 28px; }
.hm-rb__score { display: flex; align-items: center; gap: 10px; flex: none; padding-left: var(--gut); }
.hm-stars { display: flex; gap: 2px; }
.hm-stars svg { width: 13px; height: 13px; }
.hm-rb__lab { font-weight: 600; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.6; }
.hm-rb__mq { flex: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.hm-rb__track { display: flex; width: max-content; animation: hm-marq 44s linear infinite; }
.hm-rb__track > span { display: inline-flex; align-items: center; gap: 24px; padding-right: 24px; white-space: nowrap; }
.hm-rb__track b { font-weight: 600; color: #9a9a96; }
.hm-rb__track i { font-style: normal; color: #9a9a96; }
.hm-rb:hover .hm-rb__track { animation-play-state: paused; }
@keyframes hm-marq { from { transform: none; } to { transform: translateX(-50%); } }

/* ===========================================================================
   TWO-UP PRODUCT CARDS — 661×589, r20, captions and a pill beneath
   =========================================================================== */

.hm-s-cards { padding-top: 33px; }
.hm-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.hm-pcard__media { position: relative; border-radius: 20px; overflow: hidden; background: var(--tint); }
.hm-pcard__media img { width: 100%; aspect-ratio: 661 / 589; object-fit: cover; transition: transform .6s var(--ease); }
.hm-pcard:hover .hm-pcard__media img { transform: scale(1.02); }
.hm-new {
  position: absolute; top: 20px; left: 17px; width: 42px; height: 27px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .3); border-radius: 8px; color: #fff;
  font-weight: 600; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
}
.hm-pcard__body { display: grid; justify-items: center; text-align: center; margin-top: 17px; }
.hm-pcard__body h2 { font-weight: 400; font-size: 21px; line-height: 25px; letter-spacing: 0; }
.hm-pcard__body p { margin-top: 3px; font-size: 15px; line-height: 25px; color: #696969; }
.hm-pcard__body .hm-pill { margin-top: 18px; }

/* ===========================================================================
   THE MATTER APPROACH — headline block + four stats
   =========================================================================== */

.hm-s-approach { padding-top: 97px; }
.hm-ap__k { display: flex; align-items: center; gap: 13px; }
.hm-ap__k img { width: 18px; height: 19px; }
.hm-ap__k span { font-weight: 500; font-size: 14px; letter-spacing: 0.115em; text-transform: uppercase; line-height: 16px; }
.hm-ap__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-top: 37px; }
.hm-ap__h { font-weight: 400; font-size: 48px; line-height: 51px; letter-spacing: 0; max-width: 1060px; }

.hm-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 35px; margin-top: 126px; }
.hm-fact__n { display: flex; align-items: baseline; gap: 3px; height: 68px; align-items: flex-end; }
.hm-fact__srf { font-family: var(--s); font-weight: 200; font-size: 68px; line-height: 68px; letter-spacing: 0; }
.hm-fact__n sup { font-weight: 500; font-size: 27px; line-height: 40px; letter-spacing: 0; }
.hm-fact__rule { margin-top: 18px; border-top: 1px solid #9a9a96; }
.hm-fact p { margin-top: 19px; font-size: 18px; line-height: 24px; color: #a3a3a3; letter-spacing: 0; }
.hm-fact p b { font-weight: 500; color: var(--ink); }

/* ===========================================================================
   THE ONE COMPARATIVE CLAIM — 1346×607 dark rounded panel over a macro
   =========================================================================== */

#claim { padding-top: 89px; }
.hm-claim { position: relative; border-radius: 20px; overflow: hidden;
  background: #000; color: #fff; min-height: 607px; }
.hm-claim__bg { position: absolute; inset: 0; }
.hm-claim__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hm-claim__in { position: relative; padding: 51px 43px 48px; }

.hm-claim__k { display: flex; align-items: center; gap: 17px; }
.hm-claim__code { display: inline-flex; align-items: center; justify-content: center;
  width: 82px; height: 22px; border-radius: 60px; background: rgba(255, 255, 255, .2);
  font-weight: 500; font-size: 14px; letter-spacing: 0.07em; }
.hm-claim__eyebrow { font-weight: 400; font-size: 13px; letter-spacing: 0.23em; text-transform: uppercase; line-height: 16px; }

.hm-tabs { display: flex; gap: 9px; margin-top: 36px; }
.hm-tabs button {
  height: 53px; padding: 0 15px; border-radius: 10px; background: #000; color: #fff;
  font-weight: 500; font-size: 14px; letter-spacing: 0.115em; text-transform: uppercase;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.hm-tabs button[aria-selected="true"] { background: #fff; color: #000; }
.hm-tabs button:not([aria-selected="true"]):hover { background: #1c1c1c; }

.hm-claim__grid { position: relative; }
.hm-claim__copy { max-width: 500px; }
.hm-claim__h { margin-top: 23px; font-weight: 400; font-size: 48px; line-height: 58px; letter-spacing: -0.015em; max-width: 480px; }
.hm-claim__see { display: inline-block; margin-top: 31px; font-weight: 600; font-size: 13px;
  letter-spacing: 0.085em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.hm-claim__see:hover { opacity: .7; }
.hm-claim__based { margin-top: 15px; font-size: 14px; line-height: 22px; }
.hm-jcard { display: flex; align-items: center; gap: 15px; margin-top: 20px; width: max-content; }
.hm-jcard img { width: 74px; height: 54px; object-fit: cover; border-radius: 10px; flex: none; }
.hm-jcard b { display: block; font-weight: 400; font-size: 14px; line-height: 22px; }
.hm-jcard i { display: inline-block; margin-top: 1px; font-style: normal; font-weight: 600;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.hm-jcard:hover i { opacity: .7; }
.hm-claim__note { margin-top: 18px; font-weight: 350; font-size: 12px; line-height: 17px; color: rgba(255, 255, 255, .55); }

/* the chart — absolutely placed to the frame's own coordinates */
.hm-chart { position: absolute; top: -53px; right: 81px; width: 558px; height: 330px; }
.hm-mult { position: absolute; top: -70px; left: 351px; font-family: var(--s); font-weight: 200;
  font-size: 59px; line-height: 80px; letter-spacing: -0.03em; }
.hm-chart__y { position: absolute; left: -37px; top: 105px; writing-mode: vertical-rl; transform: rotate(180deg);
  font-weight: 600; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.hm-plot { position: absolute; inset: 0; }
.hm-plot__grid { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(3, 1fr); }
.hm-plot__grid i { border-top: 1px solid rgba(255, 255, 255, .35); position: relative; }
.hm-plot__grid i:last-child { position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid rgba(255, 255, 255, .35); }
.hm-plot__grid i::after { content: attr(data-v); position: absolute; right: -21px; top: -8px;
  font-weight: 350; font-size: 10px; letter-spacing: -0.01em; color: #fff; }
.hm-plot__bars { position: absolute; inset: 0; }
.hm-plot__slot { position: absolute; top: 0; bottom: 0; width: 118px; display: block; }
.hm-plot__slot:nth-child(1) { left: 123px; }
.hm-plot__slot:nth-child(2) { left: 317px; }
.hm-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 0; display: block;
  transition: height 1s var(--ease); }
.hm-chart.is-in .hm-bar { height: var(--h); }
.hm-bar--a { background: rgba(255, 255, 255, .5); }
.hm-bar--b { background: rgba(255, 255, 255, .5); }
.hm-plot__slot u { position: absolute; top: calc(100% + 14px); left: 0; right: 0; text-decoration: none;
  text-align: center; font-weight: 600; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  white-space: nowrap; }

/* ===========================================================================
   FOR EVERYBODY, AND EVERY BODY — centre-weighted lifestyle carousel
   =========================================================================== */

.hm-life { margin-top: 82px; overflow: hidden; }
.hm-life__h { text-align: center; font-weight: 400; font-size: 48px; line-height: 1; letter-spacing: 0; }
.hm-life__h em { font-family: var(--s); font-weight: 200; font-style: italic; letter-spacing: 0; }

.hm-life__view { margin-top: 45px; }
.hm-life__track { display: flex; gap: 24px; width: max-content; align-items: flex-start;
  padding-top: 50px; will-change: transform; transition: transform .55s var(--ease); cursor: grab; }
.hm-life__track.is-drag { transition: none; cursor: grabbing; }

.hm-slide { width: 386px; flex: none; }
.hm-slide__media { height: 491px; border-radius: 16px; overflow: hidden; background: #d9d9d9;
  transition: height .55s var(--ease), margin .55s var(--ease); }
.hm-slide__media img { width: 100%; height: 100%; object-fit: cover; }
.hm-slide[aria-current="true"] .hm-slide__media { height: 591px; margin-top: -50px; }

/* the floating product card — drawn under the active slide only */
.hm-lcard { display: grid; grid-template-columns: 99px minmax(0, 1fr); gap: 9px; align-items: center;
  height: 125px; margin-top: 23px; padding: 13px; border: 1px solid var(--ink); border-radius: 16px;
  background: #fff; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.hm-slide[aria-current="true"] .hm-lcard { opacity: 1; visibility: visible; }
.hm-lcard > img { width: 99px; height: 99px; object-fit: cover; border-radius: 10px; background: #d9d9d9; }
.hm-lcard__t { display: block; }
.hm-lcard__t > em { display: block; font-family: var(--s); font-style: normal; font-weight: 200;
  font-size: 22px; line-height: 24px; }
.hm-lcard__sub { display: block; margin-top: 4px; font-size: 14px; line-height: 18px;
  letter-spacing: 0; text-transform: uppercase; color: #a3a3a3; }
.hm-lcard__sub b { font-weight: 600; color: #af1e39; }
.hm-lcard__price { display: block; margin-top: 5px; font-size: 14px; line-height: 19px; letter-spacing: -0.02em; }
.hm-lcard__price s { color: #a3a3a3; }

.hm-life__dots { display: flex; justify-content: center; gap: 19px; margin-top: 34px; }
.hm-life__dots button { width: 7px; height: 7px; padding: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .2); transition: background .22s var(--ease); }
.hm-life__dots button[aria-current="true"] { background: #000; }

/* ===========================================================================
   BUY — collage 767 | specs 126 | panel 401
   =========================================================================== */

.hm-s-buy { padding-top: 80px; }
.hm-buy { display: grid; grid-template-columns: minmax(0, 767fr) 126px 401px; gap: 20px 0;
  column-gap: 0; align-items: start; }
.hm-buy__shot { margin-right: 20px; }
.hm-buy__shot img { width: 100%; height: auto; display: block; }

.hm-specs { display: grid; gap: 10px; align-content: start; margin-right: 32px; }
.hm-spec { height: 86px; border-radius: 16px; background: #f2f2f2; padding-top: 19px;
  text-align: center; }
.hm-spec b { display: block; font-weight: 300; font-size: 26px; line-height: 28px; letter-spacing: -0.01em; }
.hm-spec span { display: block; margin-top: 2px; font-size: 12.2px; line-height: 16px; color: #a3a3a3; }
.hm-spec--check { display: grid; justify-items: center; align-content: start; padding-top: 17px; }
.hm-spec--check svg { width: 15px; height: 17px; }
.hm-spec--check span { margin-top: 6px; max-width: 80px; line-height: 12px; }

.hm-panel { min-width: 0; }
.hm-panel__t em { display: block; font-family: var(--s); font-style: normal; font-weight: 200;
  font-size: 45px; line-height: 34px; letter-spacing: 0; }
.hm-panel__t span { display: block; margin-top: 4px; font-weight: 400; font-size: 21px; line-height: 27px;
  letter-spacing: -0.01em; text-transform: uppercase; color: #a3a3a3; }
.hm-panel__desc { margin-top: 9px; font-size: 17px; line-height: 23px; letter-spacing: -0.02em; }
.hm-panel__lab { margin-top: 18px; font-weight: 400; font-size: 17px; line-height: 23px; color: #a3a3a3; }

.hm-flav { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; }
.hm-flav button { display: inline-flex; align-items: center; gap: 8px; height: 33px; padding: 0 12px;
  border: 1px solid #a3a3a3; border-radius: 60px; font-size: 14px; letter-spacing: 0;
  transition: border-color .2s var(--ease); }
.hm-flav button:hover { border-color: var(--ink-45); }
.hm-flav button[aria-selected="true"] { border-color: var(--ink); }
.hm-flav i { width: 11px; height: 11px; border-radius: 50%; flex: none; }

.hm-subs { display: grid; gap: 18px; margin-top: 10px; }
.hm-sub { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px; align-items: center; width: 100%; height: 70px; text-align: left;
  border: 1px solid #a3a3a3; border-radius: 8px; padding: 0 13px;
  transition: border-color .2s var(--ease); }
.hm-sub:hover { border-color: var(--ink-70); }
.hm-sub[aria-selected="true"] { border-color: var(--ink); }
.hm-sub__dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--ink);
  display: grid; place-items: center; flex: none; }
.hm-sub__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink);
  transform: scale(0); transition: transform .2s var(--ease); }
.hm-sub[aria-selected="true"] .hm-sub__dot::after { transform: none; }
.hm-sub__l b { display: block; font-weight: 400; font-size: 17px; line-height: 19px; letter-spacing: 0; }
.hm-sub__l u { display: block; margin-top: 0; text-decoration: none; font-weight: 500; font-size: 14px;
  line-height: 19px; color: #af1e39; }
.hm-sub__p { text-align: right; }
.hm-sub__p b { display: block; font-weight: 500; font-size: 17px; line-height: 19px; letter-spacing: -0.02em; }
.hm-sub__p > span { display: block; font-size: 14px; line-height: 19px; }
.hm-sub__p s { color: #a3a3a3; letter-spacing: -0.02em; }
.hm-best { position: absolute; top: -8px; right: 13px; width: 84px; height: 17px;
  display: grid; place-items: center; background: #a3a3a3; color: #fff; border-radius: 13px;
  font-weight: 500; font-size: 12.5px; letter-spacing: 0; }

.hm-atc { width: 100%; height: 38px; margin-top: 20px; background: #000; color: #fff;
  border-radius: 60px; font-size: 16px; letter-spacing: 0; }
.hm-atc:hover { background: var(--ink-70); }
.hm-once { display: block; width: max-content; margin: 15px auto 0; font-weight: 500; font-size: 15px;
  letter-spacing: 0; }
.hm-once:hover { opacity: .6; }

/* ===========================================================================
   THE NERDY STUFF — three 439×428 cards
   =========================================================================== */

.hm-s-journal { padding-top: 89px; }
.hm-journal__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.hm-journal__h { font-weight: 400; font-size: 48px; line-height: 1; letter-spacing: -0.02em; }
.hm-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 46px; }
.hm-post__media { border-radius: 20px; overflow: hidden; background: #d9d9d9; }
.hm-post__media img { width: 100%; aspect-ratio: 439 / 428; object-fit: cover;
  transition: transform .6s var(--ease); }
.hm-post:hover .hm-post__media img { transform: scale(1.02); }
.hm-post__k { margin-top: 32px; font-weight: 400; font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; line-height: 16px; }
.hm-post h3 { margin-top: 10px; font-weight: 400; font-size: 25px; line-height: 27px;
  letter-spacing: 0; max-width: 395px; }
.hm-post:hover h3 { opacity: .6; }

/* ===========================================================================
   FOOTER — 1440×748 over a photograph, 35% veil
   =========================================================================== */

.hm-foot { position: relative; margin-top: 91px; background: #262e25; color: #fff; overflow: hidden; }
.hm-foot__bg { position: absolute; inset: 0; }
.hm-foot__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hm-foot__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.hm-foot__in { position: relative; padding-top: 45px; }

.hm-foot__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.hm-foot__top h2 { font-weight: 500; font-size: 35.8px; line-height: 40px; letter-spacing: -0.03em;
  max-width: 556px; }
.hm-foot__top h2 em { font-family: var(--s); font-weight: 400; font-style: italic; letter-spacing: 0; }
.hm-news { width: 455px; flex: none; }
.hm-news p { font-size: 17px; line-height: 22px; }
.hm-news form { display: flex; align-items: center; gap: 14px; margin-top: 9px;
  border-bottom: 1px solid #fff; padding-bottom: 26px; }
.hm-news input { flex: 1; min-width: 0; background: none; border: 0; padding: 0;
  font-family: var(--s); font-weight: 200; font-size: 36px; line-height: 43px; letter-spacing: 0; color: #fff; }
.hm-news input::placeholder { color: #fff; opacity: 1; }
.hm-news button { padding: 0; }
.hm-news button svg { width: 24px; height: 24px; }
.hm-news button:hover { opacity: .6; }

.hm-foot__grid { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 40px; margin-top: 58px; }
.hm-foot__cols { display: grid; grid-template-columns: 211px 272px auto; row-gap: 34px; }
.hm-foot__col h4 { font-weight: 400; font-size: 13px; line-height: 20px; letter-spacing: 0.15em;
  text-transform: uppercase; }
.hm-foot__col ul { margin-top: 20px; }
.hm-foot__col li + li { margin-top: 20px; }
.hm-foot__col a { font-size: 13px; line-height: 20px; letter-spacing: 0.15em; }
.hm-foot__col a:hover { opacity: .6; }

.hm-foot__end { display: flex; gap: 20px; align-items: flex-start; margin-top: 180px; flex: none; }
.hm-petals { display: grid; grid-template-columns: 89px 89px; grid-template-rows: 111px 79px;
  gap: 0 11px; width: 189px; flex: none; }
.hm-petals i { display: block; background: rgba(255, 255, 255, .15); }
.hm-petals i:nth-child(1) { border-radius: 70% 70% 10px 70%; }
.hm-petals i:nth-child(2) { border-radius: 70% 70% 70% 10px; }
.hm-petals i:nth-child(3) { width: 79px; justify-self: end; border-radius: 70% 10px 70% 70%; margin-top: -2px; }
.hm-petals i:nth-child(4) { width: 79px; border-radius: 10px 70% 70% 70%; margin-top: -2px; }

.hm-legal { width: 246px; flex: none; display: grid; }
.hm-legal > span:not(.hm-legal__pow) { border: 0.6px dashed rgba(255, 255, 255, .9); border-bottom: 0;
  padding: 14px 14px; font-weight: 600; font-size: 12px; line-height: 1.55; letter-spacing: 0; text-align: center; }
.hm-legal__mission { font-weight: 500 !important; font-size: 12px !important; letter-spacing: 0.02em !important;
  text-transform: uppercase; line-height: 15px !important; padding: 12px 28px !important; }
.hm-legal__pow { background: #fff; color: #000; padding: 10px 14px; font-weight: 600; font-size: 12px;
  text-align: center; }

.hm-foot__mark { margin-top: 27px; display: flex; justify-content: center; }
.hm-foot__mark img { width: 1186px; max-width: 92%; height: 142px; object-fit: cover; }

/* ===========================================================================
   RESPONSIVE — the Figma is desktop-only (1440); below 1180 these are
   design decisions that preserve the system
   =========================================================================== */

@media (max-width: 1280px) {
  .hm-chart { position: static; margin-top: 30px; width: auto; max-width: 558px; height: 330px; }
  .hm-mult { top: -60px; left: auto; right: 60px; }
  .hm-claim__copy { max-width: none; }
}

@media (max-width: 1180px) {
  .hm-buy { grid-template-columns: minmax(0, 1fr) 120px 360px; }
  .hm-facts { gap: 24px; margin-top: 80px; }
  .hm-fact p { font-size: 16px; line-height: 22px; }
  .hm-ap__h { font-size: 40px; line-height: 46px; }
}

@media (max-width: 1024px) {
  .hm-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
  .hm-buy { grid-template-columns: 1fr; }
  .hm-buy__shot { margin-right: 0; }
  .hm-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-right: 0; }
  .hm-panel { max-width: 480px; }
  .hm-posts { grid-template-columns: 1fr; }
  .hm-post__media img { aspect-ratio: 16 / 9; }
  .hm-foot__top { flex-direction: column; }
  .hm-foot__grid { flex-direction: column; }
  .hm-foot__end { margin-top: 20px; }
  .hm-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .hm-claim__h { font-size: 38px; line-height: 46px; }
}

@media (max-width: 860px) {
  .hm-hero { height: 78vh; }
  .hm-cards { grid-template-columns: 1fr; gap: 34px; }
  .hm-ap__row { flex-direction: column; align-items: flex-start; }
  .hm-ap__h { font-size: 32px; line-height: 38px; }
  .hm-ap__h br { display: none; }
  .hm-facts { margin-top: 56px; }
  .hm-life__h { font-size: 36px; }
  .hm-slide { width: 300px; }
  .hm-slide__media { height: 400px; }
  .hm-slide[aria-current="true"] .hm-slide__media { height: 460px; margin-top: -30px; }
  .hm-life__track { padding-top: 30px; }
  .hm-journal__h { font-size: 36px; }
  .hm-tabs { flex-wrap: wrap; }
  .hm-tabs button { height: 44px; }
  .hm-chart { height: 260px; }
  .hm-foot__cols { grid-template-columns: 1fr; gap: 34px; }
  .hm-foot__end { flex-direction: column; }
  .hm-legal { justify-self: start; }
}

@media (max-width: 768px) {
  .hm-facts { grid-template-columns: 1fr; gap: 26px; }
  .hm-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-claim__in { padding: 34px 24px 34px; }
  .hm-claim__h { font-size: 30px; line-height: 38px; }
  .hm-foot__top h2 { font-size: 28px; line-height: 34px; }
  .hm-news { width: 100%; }
  .hm-news input { font-size: 28px; }
}