/* ==========================================================================
   Novara Coffee Co. — specialty coffee, Makati
   --------------------------------------------------------------------------
   00  Tokens
   01  Reset and base
   02  Wordmark
   03  Header and nav
   04  Buttons
   05  Hero
   06  Customer favourites
   07  More than coffee
   08  Reviews
   09  Newsletter
   10  Footer
   11  Motion
   12  Responsive
   ========================================================================== */

/* 00  Tokens ==============================================================
   Read off img/comp.webp by modal pixel, not matched by eye: the ground is the
   commonest colour in the file and the tan is the commonest colour in every tan
   mass on it. Both are warm — the ground is #100E0B, not a neutral black, and
   dropping a neutral grey anywhere near it reads as a dead patch. */

:root {
  --ink:       #100E0B;   /* page ground */
  --ink-band:  #0D0B08;   /* the favourites and reviews bands, one step down */
  --ink-deep:  #0B0907;   /* footer */
  --panel:     #171310;   /* product and review cards, one step up */

  --tan:       #D5A268;
  --tan-lift:  #E2B57F;   /* hover only */
  --tan-dim:   rgba(213, 162, 104, .55);
  --tan-line:  rgba(213, 162, 104, .22);
  --tan-wash:  rgba(213, 162, 104, .08);

  --white:     #FFFFFF;
  --text:      #E4DDD4;   /* body copy — warm, never neutral grey */
  --muted:     #A99F94;

  --line:      rgba(228, 221, 212, .10);

  /* Tinted with the palette's own darkest ink. A black shadow on a warm
     near-black reads as a smudge rather than as depth. */
  --sh-card: 0 1px 2px rgba(6, 5, 4, .6), 0 24px 56px -24px rgba(6, 5, 4, .95);

  --r-card: 14px;
  --r-pill: 999px;

  --nav-h: 84px;          /* the hero is pulled up by exactly this */
  --shell: min(1180px, 100% - 80px);
  --gut:   max(40px, calc((100vw - 1180px) / 2));

  --f-display: 'Playfair Display', Georgia, serif;
  --f-sans:    'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
}


/* 01  Reset and base ====================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: hidden here would stop the sticky header sticking. */
  overflow-x: clip;
}

svg { display: block; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

.shell { width: var(--shell); margin-inline: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Headings are Playfair, and every one of them is broken into spans rather than
   <br>. A hidden <br> at a breakpoint deletes the break with nothing in its
   place and welds the words together; spans keep the break and the space. */
.h2, .hero__title {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.005em;
  color: var(--white);
}
.h2 { font-size: clamp(32px, 3.6vw, 48px); }   /* x1.15 */
.h2 span, .hero__title span { display: block; }
.h2 span span { display: inline; }   /* the tan word sits inside its own line */

.tan { color: var(--tan); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--tan);
}
.eyebrow svg { width: 19px; height: 19px; }
.eyebrow--center { justify-content: center; }

.head--center { text-align: center; }
.head--center .h2 { margin-top: 14px; }

.u-sr, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: absolute; left: 16px; top: 14px; z-index: 200;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--tan); color: var(--ink); font-weight: 600;
}

:focus-visible { outline: 2px solid var(--tan); outline-offset: 3px; }


/* 02  Wordmark ============================================================ */

.mark { display: inline-flex; align-items: center; gap: 12px; }
.mark__icon { width: 38px; height: 38px; color: var(--tan); flex: none; }
.mark__text { display: grid; gap: 1px; }
.mark__name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 25px;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--white);
}
.mark__sub {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--muted);
}


/* 03  Header and nav ====================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  /* Nothing at all at the top of the page — the plate runs clean under the bar
     and only the logo, the links and the button sit on it. The glass is the
     SCROLLED state: background and blur arrive together on .is-stuck, because a
     translucent bar with no blur just puts the nav links on top of whatever the
     photograph happens to be. */
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, backdrop-filter .25s ease, border-color .25s ease;
}
.site-header.is-stuck,
.site-header.is-open {
  background: rgba(16, 14, 11, .72);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  border-bottom-color: var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.4vw, 34px);
  min-height: 84px;
}

.nav__links { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 26px); }
.nav__links > a {
  position: relative;
  padding: 6px 0;
  font-size: 15.5px;
  color: var(--text);
  transition: color .16s ease;
}
.nav__links > a:hover { color: var(--tan); }
/* The comp underlines the current page with a short tan rule, not a full one. */
.nav__links > a.is-here { color: var(--white); }
.nav__links > a.is-here::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px;
  background: var(--tan);
}

.nav__tools { display: flex; align-items: center; gap: 8px; }
/* Weight AND order: .btn sets display:inline-flex and lives in section 04,
   after this one, so a bare .nav__cta at the same 0-1-0 specificity lost to it
   and the button showed at desktop as well. Qualifying it past .btn settles
   both. Mobile turns it back on at the 700 breakpoint. */
.nav__links > a.nav__cta { display: none; }

.iconbtn {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--text);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.iconbtn:hover { background: var(--tan-wash); color: var(--tan); }
.iconbtn svg { width: 21px; height: 21px; }

.burger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0; border: 0;
  background: transparent; cursor: pointer;
}
.burger span {
  width: 21px; height: 2px; border-radius: 2px;
  background: var(--text);
  transition: transform .22s ease, opacity .16s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* 04  Buttons =============================================================
   The comp has exactly two: a solid tan pill and a hairline pill. Both are
   fully rounded — the only square corners on the page are the cards'. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  border: 1px solid var(--tan);
  border-radius: var(--r-pill);
  background: var(--tan);
  color: #26170A;          /* not the page ink: on tan it wants a warmer black */
  font-size: 15.5px;
  font-weight: 500;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn svg { width: 19px; height: 19px; }
.btn:hover { background: var(--tan-lift); border-color: var(--tan-lift); }

.btn--sm { padding: 10px 20px; font-size: 14.5px; }

.btn--ghost {
  background: transparent;
  border-color: var(--tan-dim);
  color: var(--text);
}
.btn--ghost svg { color: var(--tan); }
.btn--ghost:hover { background: var(--tan-wash); border-color: var(--tan); color: var(--white); }

.btn--solid { border-radius: 10px; }


/* 05  Hero ================================================================ */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* One full-width plate carrying its own ground, its own light and its own
     props, generated from the comp rather than composited over CSS. The left
     45% of it is deliberately empty — that is where this copy sits — so there
     is no figure to mask and no join to hide.

     cover, not `auto 100%`: the plate is 1.5:1 and the hero runs wider than
     that, so cover crops the height, which the plate was written to survive.
     The cups and the slab are inside the middle three-quarters, so an 18% trim
     split top and bottom never reaches them.

     The scrim paints over the photograph, not under it. The plate's left is
     already near-black, but "near" is not "guaranteed" once a headline in
     Playfair sits on it. */
  background:
    linear-gradient(to right, var(--ink) 0 12%, rgba(16, 14, 11, .78) 34%, rgba(16, 14, 11, 0) 62%),
    url("img/hero.webp?v=2") center / cover no-repeat,
    var(--ink);
  /* Pulled up under the header so the plate runs behind it. Without this the
     nav's transparency shows the page ground and there is nothing to blur —
     the effect only means anything with a photograph under it. The top padding
     gives the height back so the copy still clears the bar. */
  margin-top: calc(var(--nav-h) * -1);
  min-height: clamp(520px, 54vw, 780px);
  padding-block: calc(var(--nav-h) + clamp(44px, 5vw, 76px)) clamp(44px, 5vw, 76px);
}

.hero__copy { max-width: min(560px, 50%); }

.hero__title {
  margin-top: 20px;
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 1.1;
}

.hero__sub {
  max-width: 40ch;
  margin-top: clamp(16px, 1.9vw, 26px);
  color: var(--muted);
}

.hero .btn { margin-top: clamp(22px, 2.6vw, 34px); }

/* The four little marks under the button. A grid rather than a flex row, so the
   second lines stay on one baseline when one of them wraps. */
.marks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 22px);
  /* Same column as the copy above it; it used to live inside .hero__copy and
     moved out so the phone layout can put the plate between them. */
  max-width: min(560px, 50%);
  margin-top: clamp(30px, 3.8vw, 52px);
  text-align: center;
}
.hero__plate { display: none; }
.marks li { display: grid; justify-items: center; gap: 4px; }
.marks svg { width: 26px; height: 26px; margin-bottom: 6px; color: var(--tan); }
.marks strong { font-size: 14.5px; font-weight: 500; color: var(--white); line-height: 1.25; }
.marks span { font-size: 13px; color: var(--muted); line-height: 1.25; }


/* 06  Customer favourites ================================================= */

.menu {
  position: relative;
  overflow: hidden;
  background: var(--ink-band);
  padding-block: clamp(38px, 4.4vw, 64px);
}

/* The comp prints a coffee branch into the left edge at about a tenth
   opacity. Drawn, not photographed — a photograph at that opacity is mud. */
.menu__frond {
  position: absolute;
  left: calc(var(--gut) * -.35);
  top: 6%;
  width: clamp(120px, 15vw, 210px);
  height: auto;
  color: var(--tan);
  opacity: .13;
  pointer-events: none;
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: clamp(24px, 2.8vw, 38px);
}
.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--panel);
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--tan-dim); transform: translateY(-3px); }
/* 5:4, as the comp has it. Square was the first pass and it made every card a
   fifth taller than it needed to be, which was most of why the favourites band
   ran 27% over. Checked before committing to it: a 5:4 frame on these 1:1
   plates crops 10% off each end, and the tallest subject of the four (the iced
   latte, 17.1% to 88.3%) still clears it. */
.card > img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }

.card__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.card h3 {
  font-family: var(--f-display);
  font-size: 23px;
  font-weight: 600;
  color: var(--white);
}
.card__body > p { margin-top: 8px; font-size: 16.5px; line-height: 1.5; color: var(--muted); }

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
}
.price { font-size: 21px; font-weight: 500; color: var(--white); }
.add {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--tan);
  color: #26170A;
}
.add svg { width: 17px; height: 17px; }

.menu__more { margin-top: clamp(26px, 3.2vw, 42px); text-align: center; }


/* 07  More than coffee ==================================================== */

.why { padding-block: clamp(38px, 4.4vw, 64px); }

.why__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: clamp(30px, 4.6vw, 76px);
}
.why .h2 { margin-top: 14px; }
.why__lede { margin-top: 18px; max-width: 42ch; color: var(--muted); }

.why__figure { margin-top: clamp(24px, 3vw, 38px); }
.why__figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--tan-line);
  border-radius: var(--r-card);
}

.rows { display: grid; }
.rows li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(16px, 2vw, 26px);
  padding-block: clamp(14px, 1.7vw, 20px);
}
/* Rules between rows, not around them — the comp divides one object rather
   than stacking four. */
.rows li + li { border-top: 1px solid var(--tan-line); }
.rows__disc {
  display: grid; place-items: center;
  width: 62px; height: 62px;
  border: 1px solid var(--tan-dim);
  border-radius: 50%;
  color: var(--tan);
}
.rows__disc svg { width: 30px; height: 30px; }
.rows h3 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--white);
}
.rows p { margin-top: 7px; font-size: 17.5px; line-height: 1.55; color: var(--muted); }


/* 08  Reviews ============================================================= */

.reviews {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink-band);
  padding-block: clamp(38px, 4.4vw, 64px);
}
/* The beans photograph runs the full width behind this band at a quarter
   strength, with the band's own colour laid over it — at full strength the
   testimonials became unreadable, and dimming the image itself would have cost
   the same bytes for less control. */
.reviews__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--ink) 0, rgba(13, 11, 8, .88) 18%, rgba(13, 11, 8, .88) 82%, var(--ink) 100%),
    url("img/beans.webp") center / cover no-repeat;
}

.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(24px, 2.8vw, 38px);
}
.quote {
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: rgba(23, 19, 16, .82);
  backdrop-filter: blur(2px);
  text-align: center;
}
.stars { display: flex; justify-content: center; gap: 4px; }
.stars svg { width: 19px; height: 19px; color: var(--tan); }
.quote blockquote p { margin-top: 16px; font-size: 17.5px; line-height: 1.6; }

.quote__by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(18px, 2.2vw, 26px);
  text-align: left;
}
.quote__by img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.quote__by span { display: grid; }
.quote__by strong { font-size: 16.5px; font-weight: 500; color: var(--white); }
.quote__by span span { font-size: 15px; color: var(--muted); }

.dots { display: flex; justify-content: center; gap: 9px; margin-top: clamp(24px, 3vw, 38px); }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--tan-dim); opacity: .45; }
.dots i.is-on { opacity: 1; background: var(--tan); }


/* 09  Newsletter ========================================================== */

.signup { background: var(--ink); padding-block: clamp(34px, 4vw, 54px); }

.signup__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
}
.signup__disc {
  display: grid; place-items: center;
  width: 62px; height: 62px;
  border: 1px solid var(--tan-line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--tan);
}
.signup__disc svg { width: 30px; height: 30px; }

.signup__copy h2 {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 600;
  color: var(--white);
}
.signup__copy p { margin-top: 4px; font-size: 15px; color: var(--muted); }

.signup__form { display: flex; gap: 0; }
.signup__form input {
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: var(--panel);
  color: var(--text);
  font-size: 15px;
}
.signup__form input::placeholder { color: var(--muted); }
.signup__form .btn { border-radius: 0 10px 10px 0; }


/* 10  Footer ============================================================== */

.site-footer { background: var(--ink-deep); padding-top: clamp(32px, 3.8vw, 54px); }

.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, .9fr)) minmax(0, 1.1fr);
  gap: clamp(24px, 3vw, 46px);
  align-items: start;
}
.foot__brand p { margin-top: 14px; max-width: 30ch; font-size: 15px; color: var(--muted); }

.foot__social { display: flex; gap: 10px; margin-top: 16px; }
.foot__social a {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  transition: color .16s ease, border-color .16s ease;
}
.foot__social a:hover { color: var(--tan); border-color: var(--tan-dim); }
.foot__social svg { width: 16px; height: 16px; }

.foot__col h3 {
  margin-bottom: 12px;
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--tan);
}
.foot__col > a, .foot__col--contact p {
  display: block;
  padding: 3px 0;
  font-size: 15px;
  color: var(--muted);
  transition: color .16s ease;
}
.foot__col > a:hover, .foot__col--contact a:hover { color: var(--tan); }

.foot__fine {
  width: var(--shell);
  margin: clamp(24px, 2.8vw, 38px) auto 0;
  padding-block: 18px 22px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}


/* 11  Motion ============================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* 12  Responsive ==========================================================
   Three breakpoints. 1120 is where eight nav links stop fitting beside the
   tools; 940 is where four product cards stop holding a sentence; 700 is where
   the two-column sections stop being two. */

@media (max-width: 1120px) {
  :root { --shell: min(1180px, 100% - 56px); --gut: max(28px, calc((100vw - 1180px) / 2)); }

  .burger { display: flex; order: 2; }
  .nav { flex-wrap: wrap; }
  .nav__tools { order: 3; }
  .nav__links {
    order: 4;
    flex-basis: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 4px 0 16px;
    border-top: 1px solid var(--line);
  }
  .nav__links.is-open { display: flex; }
  .nav__links > a { padding: 9px 2px; font-size: 16.5px; }
  .nav__links > a.is-here::after { right: auto; width: 26px; }
}

@media (max-width: 940px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__brand { grid-column: 1 / -1; }
  .signup__grid { grid-template-columns: auto minmax(0, 1fr); }
  .signup__form { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  :root { --shell: min(1180px, 100% - 40px); --gut: max(20px, calc((100vw - 1180px) / 2)); }

  :root { --nav-h: 68px; }
  /* One row, always. The bar was wrapping: the wordmark, the burger and the
     four-item tools group came to about 346px against a 335px shell, so the
     tools dropped to a second line — and with the header transparent at the top
     of the page, that second line had nothing behind it and sat straight on the
     hero heading. The whole tools group goes away here and the button reappears
     inside the menu. */
  /* flex-wrap stays WRAP. nowrap was the first fix here and it stopped the
     open panel taking its own row — .nav__links has flex-basis:100% and with
     nowrap it was squeezed to 132px against the right edge instead. Hiding the
     tools is already enough to keep the bar itself on one line. */
  .nav { min-height: 0; padding-block: 15px; }
  .nav__tools { display: none; }
  .nav__links { flex-wrap: wrap; }
  /* Selector weight, not a value mistake: .nav__links > a is 0-1-1 and
     .btn--sm is 0-1-0, so the panel's own `padding: 9px 2px` was beating the
     button's and squeezing "Order now" into 85px with the text overrunning it.
     Matching the panel's specificity puts the pill's padding back. */
  .nav__links > a.nav__cta {
    display: inline-flex;
    margin-top: 14px;
    padding: 13px 26px;
    font-size: 15px;
  }
  .mark__icon { width: 34px; height: 34px; }
  .mark__name { font-size: 22px; }

  /* Stacked, not scrimmed. The plate used to sit under the copy with a heavy
     gradient carrying the contrast, and at 390 the iced cup still showed
     through the paragraph. Now the copy sits on plain ink, the plate follows
     as its own full-bleed band cropped to the cups, and the four marks close
     the section under it — a figure, not a wash. */
  .hero { align-items: flex-start; min-height: 0; background: var(--ink); padding-bottom: clamp(36px, 9vw, 48px); }
  .hero__copy { max-width: none; }
  .hero__title { font-size: clamp(34px, 9.4vw, 46px); }
  .hero__sub { max-width: 36ch; }
  /* Its own plate, not a crop of the desktop one. The 1.5:1 plate cut to a
     short band left the cups small and off to one side with dark nothing
     around them; this is the same scene recomposed 2:3 with the cups filling
     the width, so the figure is as big on a phone as it is on a desktop. The
     button above overlaps its top edge — the top of the plate is ground, and
     an overlap is what makes copy and picture read as one hero. */
  .hero__plate {
    display: block;
    height: clamp(420px, 124vw, 520px);
    margin: -22px calc(50% - 50vw) 0;
    background:
      linear-gradient(to bottom, var(--ink) 0, rgba(16, 14, 11, 0) 18%, rgba(16, 14, 11, 0) 86%, var(--ink) 100%),
      url("img/hero-mobile.webp?v=1") center 62% / cover no-repeat,
      var(--ink);
  }
  .hero .btn { position: relative; z-index: 1; }
  .marks { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; max-width: none; margin-top: 4px; }

  .why__grid { grid-template-columns: minmax(0, 1fr); }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .signup__grid { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
  .signup__form { flex-wrap: wrap; }
}