Update coupon flow copy

src/components/Applications/data/applications.data.ts

@@ -56,10 +56,10 @@ export const applicationsSectionData: ApplicationsSectionData = {
     },
     {
       id: 'kitchen',
-      title: 'Кухні та комерційні простори',
+      title: 'Комерція',
       text: 'Гігієнічне, зносостійке рішення для кухонь, кафе, магазинів та офісів.',
       image: kitchenImage,
-      imageAlt: 'Кухня з мікроцементом',
+      imageAlt: 'Рецепшн з мікроцементом',
       buttonLabel: 'Збільшити фото',
     },
   ],

src/components/Benefits/Benefits.tsx

@@ -15,7 +15,7 @@ const Benefits = () => {
           <p className="section-subtitle">{subtitle}</p>
         </header>
 
-        <div className="hidden gap-4 md:flex md:flex-wrap md:justify-center lg:flex-nowrap">
+        <div className="hidden gap-4 lg:flex lg:flex-nowrap lg:justify-center">
           {items.map(item => (
             <BenefitCard key={item.id} benefit={item} />
           ))}

src/components/Benefits/BenefitsMobileWheel.tsx

@@ -7,7 +7,7 @@ type BenefitsMobileWheelProps = {
 
 const BenefitsMobileWheel = ({ items }: BenefitsMobileWheelProps) => {
   return (
-    <div className="md:hidden">
+    <div className="lg:hidden">
       <div className="relative mb-12">
         {items.map((item, index) => {
           const cardStyle = {

src/components/Hero/Hero.tsx

@@ -24,7 +24,7 @@ const Hero = () => {
     <section className="bg-page relative mt-8 overflow-hidden lg:-mt-17">
       <div className="section-container relative z-10 flex flex-col items-center pb-0 lg:grid lg:min-h-[calc(100svh-72px)] lg:grid-cols-[0.9fr_1.1fr] lg:gap-10 lg:pt-0 lg:pb-16">
         <div className="relative z-10 flex flex-col items-center lg:min-w-[580px] lg:items-start xl:min-w-150">
-          <h1 className="text-hero max-w-[clamp(320px,calc(223.2px+23.05vw),400px)] tracking-tight md:max-w-[540px] lg:mt-60 lg:max-w-[720px] lg:min-w-140 lg:text-start xl:max-w-200">
+          <h1 className="text-hero max-w-[clamp(320px,calc(223.2px+23.05vw),400px)] font-semibold tracking-tight md:max-w-[540px] lg:mt-60 lg:max-w-[720px] lg:min-w-140 lg:text-start xl:max-w-200">
             Мікроцемент у Львові <br /> для ванних, підлог і стін
           </h1>
 
@@ -60,7 +60,7 @@ const Hero = () => {
             />
           </div>
 
-          <ul className="mt-10 hidden gap-6 sm:grid-cols-3 md:grid lg:mt-18 lg:max-w-[620px] lg:gap-3">
+          <ul className="mt-10 hidden sm:grid-cols-3 md:grid lg:mt-18 lg:max-w-[620px] lg:gap-1">
             {heroBadges.map(badge => (
               <li key={badge.title} className="flex items-start gap-2">
                 <span className="border-border-soft bg-surface/60 flex size-11 shrink-0 items-center justify-center rounded-full border lg:size-5">

src/components/HowItWorks/HowItWorks.tsx

@@ -13,7 +13,7 @@ const HowItWorks = () => {
           <p className="section-subtitle">{subtitle}</p>
         </header>
 
-        <ol className="1xl:grid-cols-4 grid grid-cols-1 gap-5 lg:grid-cols-4 lg:gap-8">
+        <ol className="1xl:grid-cols-4 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4 lg:gap-8">
           {steps.map((step, index) => (
             <HowStepCard
               key={step.id}

src/components/HowItWorks/HowStepCard.tsx

@@ -12,7 +12,7 @@ const HowStepCard = ({ step, isLast = false, isSecond = false }: HowStepCardProp
 
   return (
     <li className="relative flex flex-col items-center lg:flex-1">
-      <article className="border-border-soft bg-bg-card shadow-soft flex h-full min-h-[270px] w-full flex-col items-center justify-between rounded-2xl border px-6 py-8 text-center sm:max-w-none sm:gap-6 sm:max-lg:flex-row lg:flex-col lg:px-5 lg:py-9">
+      <article className="border-border-soft bg-bg-card shadow-soft flex h-full w-full flex-col items-center justify-between gap-6 rounded-2xl border px-6 py-8 text-center sm:max-w-none md:min-h-[270px] lg:flex-col lg:px-5 lg:py-9">
         <div className="bg-bg-card-soft flex size-18 items-center justify-center rounded-full">
           <svg className="text-accent size-8" aria-hidden="true">
             <use href={`/svg/icons.svg${step.icon}`} />

src/components/MoreInfo/MoreInfoForm.tsx

@@ -257,7 +257,7 @@ export default function MoreInfoForm() {
               <use href="/svg/icons.svg#icon-shield" />
             </svg>
 
-            <span>{moreInfoTrustLine}</span>
+            <span className="max-w-70 text-start md:max-w-none">{moreInfoTrustLine}</span>
           </p>
 
           {submitStatus === 'success' && (

src/index.css

@@ -205,7 +205,7 @@
   }
 
   .section-title {
-    @apply text-text-main mb-5 text-3xl font-semibold tracking-tight md:text-4xl;
+    @apply text-text-main mb-5 text-xl tracking-tight sm:text-3xl md:text-4xl;
   }
 
   .section-subtitle {