/* ============================================================================
   JUST CAPTIONS — MARKETING SITE
   ----------------------------------------------------------------------------
   System: high-contrast black & white + one highlighter yellow (#FFE34C).
   Type:   SF Pro Display (Apple) / Geist (web)  ·  Geist Mono for metadata.
   Yellow lives on: primary CTA, the marker swipe behind key words, active
   markers, and burned-in caption strips. One dark surface (final CTA) only.
   Build is sectioned + commented for handoff. Reusable classes: .btn, .pill,
   .card, .chip, .marker, .feature, .eyebrow, .container.
   ============================================================================ */

:root{
  /* brand */
  --yellow:       #FFE34C;
  --yellow-deep:  #F5D200;
  --yellow-soft:  #FFF7C2;
  --black:        #0A0A0A;
  --ink:          #141414;

  /* neutrals (warm-tinted, low chroma) */
  --white:        #FFFFFF;
  --paper:        #FBFAF6;   /* page bg — a hair warm */
  --gray-50:      #F4F3EE;
  --gray-100:     #ECEBE4;
  --gray-200:     #DEDDD4;
  --gray-300:     #C9C7BC;
  --gray-400:     #9A988D;
  --gray-500:     #6E6C63;
  --gray-600:     #4A4842;
  --gray-700:     #2C2B27;

  /* type */
  --sans:  -apple-system, BlinkMacSystemFont, "SF Pro Display", "Geist", system-ui, sans-serif;
  --mono:  "Geist Mono", ui-monospace, "SF Mono", monospace;

  /* radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* shadow */
  --sh-sm: 0 1px 2px rgba(20,20,18,.05), 0 6px 16px -8px rgba(20,20,18,.10);
  --sh-md: 0 2px 4px rgba(20,20,18,.04), 0 18px 44px -16px rgba(20,20,18,.18);
  --sh-lg: 0 30px 70px -28px rgba(20,20,18,.30);
  --sh-yellow: 0 14px 34px -10px rgba(245,210,0,.55);

  --maxw: 1180px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--black);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--yellow);color:var(--black);}

/* ---- layout ------------------------------------------------------------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
section{position:relative;}

/* ---- type helpers ------------------------------------------------------- */
h1,h2,h3,h4{letter-spacing:-.03em;line-height:1.02;font-weight:800;text-wrap:balance;}
.eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray-500);white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--yellow);
  box-shadow:0 0 0 4px rgba(255,227,76,.28);}
.lead{font-size:20px;line-height:1.5;color:var(--gray-600);font-weight:400;letter-spacing:-.01em;}
.muted{color:var(--gray-500);}

/* the signature marker swipe behind a word */
.marker{
  background:var(--yellow);
  box-shadow: 6px 0 0 var(--yellow), -6px 0 0 var(--yellow);
  border-radius:4px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:0 2px;
}

/* ---- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.01em;
  height:54px;padding:0 28px;border-radius:var(--r-pill);border:none;cursor:pointer;
  transition:transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--black);color:#fff;}
.btn-primary:hover{background:#1f1f1d;box-shadow:var(--sh-md);}
.btn-yellow{background:var(--yellow);color:var(--black);box-shadow:var(--sh-yellow);}
.btn-yellow:hover{background:var(--yellow-deep);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--black);border:1.5px solid var(--gray-300);}
.btn-ghost:hover{border-color:var(--black);background:var(--white);}
.btn-sm{height:42px;padding:0 18px;font-size:14px;}
.btn-lg{height:60px;padding:0 34px;font-size:17px;}

/* ---- pills / chips ------------------------------------------------------ */
.pill{
  display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 15px;
  border-radius:var(--r-pill);background:var(--white);border:1px solid var(--gray-200);
  font-size:13px;font-weight:500;color:var(--gray-600);box-shadow:var(--sh-sm);
}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--yellow);}
.chip{
  display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:var(--r-pill);
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  background:var(--gray-50);border:1px solid var(--gray-200);color:var(--gray-500);
}

/* ---- cards -------------------------------------------------------------- */
.card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-lg);box-shadow:var(--sh-sm);}

/* ---- icon chip ---------------------------------------------------------- */
.ico{
  width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--gray-50);border:1px solid var(--gray-200);color:var(--black);flex:none;
}
.ico.yellow{background:var(--yellow);border-color:var(--yellow-deep);}
.ico svg{width:22px;height:22px;}

/* striped media placeholder (for clips we don't have yet) */
.ph{
  background:
    repeating-linear-gradient(135deg, rgba(20,20,18,.045) 0 8px, transparent 8px 16px),
    var(--gray-50);
  border:1px solid var(--gray-200);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-400);
}

/* burned-in caption strip presets (the product's 4 styles) */
.cap-strip{font-family:var(--sans);font-weight:800;letter-spacing:-.01em;line-height:1.15;display:inline-block;}
.cap-whitebox{background:#fff;color:#0A0A0A;padding:4px 11px;border-radius:7px;box-shadow:0 4px 14px rgba(0,0,0,.25);}
.cap-yellowbox{background:var(--yellow);color:#0A0A0A;padding:4px 11px;border-radius:7px;box-shadow:0 4px 14px rgba(0,0,0,.25);}
.cap-whiteoutline{color:#fff;-webkit-text-stroke:1.6px #0A0A0A;paint-order:stroke fill;text-shadow:0 2px 10px rgba(0,0,0,.85),0 0 18px rgba(0,0,0,.7);}
.cap-blackbox{background:#0A0A0A;color:#fff;padding:4px 11px;border-radius:7px;}
.cap-pop .hl{color:var(--yellow);}

/* ============================ NAV ======================================== */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(251,250,246,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.scrolled{border-bottom-color:var(--gray-200);box-shadow:0 1px 0 rgba(0,0,0,.02);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px;}
.logo{font-size:21px;font-weight:800;letter-spacing:-.04em;display:inline-flex;align-items:center;gap:1px;}
.logo .hl{background:var(--yellow);padding:1px 7px;border-radius:6px;}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{font-size:15px;font-weight:500;color:var(--gray-600);transition:color .15s;}
.nav-links a:hover{color:var(--black);}
.nav-cta{display:flex;align-items:center;gap:12px;}
.nav-toggle{display:none;}

/* ============================ HERO ======================================= */
.hero{padding:64px 0 40px;text-align:center;overflow:hidden;}
.hero .container{display:flex;flex-direction:column;align-items:center;}
.hero h1{
  font-size:clamp(42px,7vw,84px);margin:22px 0 0;max-width:14ch;
}
.hero .lead{margin:22px auto 0;max-width:46ch;font-size:clamp(17px,2.2vw,21px);}
.hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;justify-content:center;}
.hero-sub{margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--gray-400);
  display:flex;gap:18px;flex-wrap:wrap;justify-content:center;}
.hero-sub span{display:inline-flex;align-items:center;gap:6px;}
.hero-sub svg{width:14px;height:14px;}

/* ---- DROPBOX ------------------------------------------------------------ */
.dropbox{
  position:relative;width:100%;max-width:820px;margin:42px auto 0;
  background:var(--white);border-radius:var(--r-xl);
  border:2.5px dashed var(--gray-300);
  box-shadow:var(--sh-lg);
  padding:38px;transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
  cursor:pointer;
}
.dropbox.drag{border-color:var(--yellow-deep);background:var(--yellow-soft);transform:scale(1.01);}
.dropbox-inner{display:flex;flex-direction:column;align-items:center;gap:16px;}
.drop-ico{
  width:64px;height:64px;border-radius:20px;background:var(--black);color:var(--yellow);
  display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease);
}
.dropbox.drag .drop-ico{transform:translateY(-4px);}
.drop-ico svg{width:30px;height:30px;}
.drop-title{font-size:22px;font-weight:700;letter-spacing:-.02em;}
.drop-title .marker{font-weight:800;}
.drop-meta{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--gray-400);text-transform:uppercase;}
.drop-or{display:flex;align-items:center;gap:14px;width:100%;max-width:260px;color:var(--gray-300);font-size:12px;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;}
.drop-or::before,.drop-or::after{content:"";flex:1;height:1px;background:var(--gray-200);}
/* faux thumbnails appended on drop */
.drop-queue{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px;}
.drop-thumb{width:46px;height:62px;border-radius:9px;background:var(--gray-100);border:1px solid var(--gray-200);
  position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;
  font-family:var(--mono);font-size:8px;color:var(--gray-400);}
.drop-thumb::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,rgba(20,20,18,.05) 0 5px,transparent 5px 10px);}
.drop-thumb.add{background:var(--yellow-soft);border-color:var(--yellow-deep);color:var(--gray-600);align-items:center;}

/* ============================ CREATOR ROW ================================ */
.creators{padding:30px 0 24px;overflow:hidden;}
.creator-rail{display:flex;gap:18px;justify-content:center;align-items:flex-end;flex-wrap:nowrap;}
.creator{
  position:relative;flex:none;width:188px;border-radius:22px;overflow:hidden;
  box-shadow:var(--sh-md);background:var(--gray-100);
}
.creator img{width:100%;height:100%;object-fit:cover;display:block;}
.creator .cap-strip{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;
  font-size:15px;white-space:nowrap;}
.creator .tagchip{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.06em;text-transform:uppercase;background:rgba(10,10,10,.55);color:#fff;
  padding:4px 8px;border-radius:6px;backdrop-filter:blur(6px);}
.creators-cap{text-align:center;margin-top:22px;font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gray-400);}

/* ============================ PROOF BAR ================================== */
.proof{padding:34px 0;border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200);margin-top:28px;}
.proof-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;}
.stat{display:flex;flex-direction:column;gap:2px;}
.stat b{font-size:30px;font-weight:800;letter-spacing:-.03em;}
.stat span{font-size:13px;color:var(--gray-500);}
.proof-div{width:1px;height:38px;background:var(--gray-200);}

/* ============================ SECTION HEADERS ============================ */
.sec-head{text-align:center;max-width:38ch;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px;}
.sec-head h2{font-size:clamp(30px,4.4vw,50px);}
.pad{padding:96px 0;}
.pad-sm{padding:64px 0;}

/* ============================ HOW IT WORKS ============================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px;}
.step{padding:26px;position:relative;}
.step-n{font-family:var(--mono);width:38px;height:38px;border-radius:50%;background:var(--yellow);
  color:var(--black);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;
  margin-bottom:18px;}
.step .vis{height:150px;margin-bottom:18px;border-radius:14px;overflow:hidden;position:relative;}
.step h3{font-size:20px;font-weight:700;margin-bottom:7px;letter-spacing:-.02em;}
.step p{font-size:15px;color:var(--gray-500);line-height:1.55;}

/* mini app visual inside steps */
.mini{position:absolute;inset:0;background:#0E0E0D;display:flex;align-items:center;justify-content:center;}
.mini .cap-strip{font-size:15px;}
.mini-stripes{position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 8px,transparent 8px 16px);}
.mini-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;}
.mini-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,13,.25) 0%,rgba(14,14,13,.55) 100%);}

/* ============================ FEATURE ROWS ============================== */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:60px 0;}
.feature:nth-child(even) .feature-media{order:-1;}
.feature-copy .eyebrow{margin-bottom:18px;}
.feature-copy h3{font-size:clamp(26px,3.2vw,38px);font-weight:800;margin-bottom:16px;}
.feature-copy p{font-size:17px;color:var(--gray-600);line-height:1.6;margin-bottom:20px;max-width:46ch;}
.feat-list{display:flex;flex-direction:column;gap:11px;margin-top:4px;}
.feat-list li{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--gray-700);list-style:none;}
.feat-list .tick{width:22px;height:22px;border-radius:50%;background:var(--yellow);display:flex;
  align-items:center;justify-content:center;flex:none;}
.feat-list .tick svg{width:13px;height:13px;color:var(--black);}
.feature-media{position:relative;}

/* a faux phone frame for feature visuals */
.phone{
  width:262px;margin:0 auto;background:#0A0A0A;border-radius:40px;padding:10px;
  box-shadow:var(--sh-lg);position:relative;
}
.phone-screen{border-radius:31px;overflow:hidden;background:#111;aspect-ratio:262/540;position:relative;display:flex;flex-direction:column;}
.phone-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:90px;height:22px;background:#0A0A0A;border-radius:999px;z-index:3;}
.vid-fill{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#222 0 9px,#1a1a1a 9px 18px);}
.vid-fill.img{background:none;}.vid-fill.img img{width:100%;height:100%;object-fit:cover;}

/* preset picker visual */
.presets{display:flex;flex-direction:column;gap:12px;}
.preset-card{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:16px;
  background:#141413;position:relative;overflow:hidden;}
.preset-card .stage{width:120px;height:62px;border-radius:10px;overflow:hidden;position:relative;flex:none;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;}
.preset-card .stage::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,#2a2a28 0 7px,#222 7px 14px);}
.preset-card .stage .cap-strip{position:relative;font-size:12px;}
.preset-card .meta{display:flex;flex-direction:column;gap:3px;}
.preset-card .meta b{font-size:15px;color:#fff;font-weight:600;}
.preset-card .meta span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.4);}
.preset-card.active{outline:2px solid var(--yellow);}
.preset-card.active .meta::after{content:"●";position:absolute;right:16px;color:var(--yellow);font-size:11px;}

/* edit-text visual */
.edit-vis{background:#fff;border-radius:20px;border:1px solid var(--gray-200);box-shadow:var(--sh-md);padding:18px;}
.edit-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;}
.edit-row .ts{font-family:var(--mono);font-size:11px;color:var(--gray-400);flex:none;width:64px;}
.edit-row .tx{font-size:15px;color:var(--gray-700);}
.edit-row.sel{background:var(--yellow-soft);outline:1.5px solid var(--yellow);}
.edit-row .fix{margin-left:auto;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  background:var(--black);color:var(--yellow);padding:3px 8px;border-radius:6px;flex:none;}
.strike{text-decoration:line-through;color:var(--gray-400);}

/* ============================ USE CASES ================================= */
.uc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:52px;}
.uc{padding:24px;display:flex;flex-direction:column;gap:13px;transition:transform .2s var(--ease),box-shadow .2s var(--ease);}
.uc:hover{transform:translateY(-3px);box-shadow:var(--sh-md);}
.uc h4{font-size:18px;font-weight:700;letter-spacing:-.02em;}
.uc p{font-size:14px;color:var(--gray-500);line-height:1.55;}

/* ============================ ALL FEATURES GRID ========================= */
.allfeat{background:var(--gray-50);}
.af-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:52px;
  background:var(--gray-200);border:1px solid var(--gray-200);border-radius:var(--r-lg);overflow:hidden;}
.af{background:var(--paper);padding:26px;display:flex;flex-direction:column;gap:11px;transition:background .15s;}
.af:hover{background:#fff;}
.af .ico{width:40px;height:40px;border-radius:11px;}
.af .ico svg{width:19px;height:19px;}
.af b{font-size:16px;font-weight:700;letter-spacing:-.02em;}
.af p{font-size:13.5px;color:var(--gray-500);line-height:1.5;}

/* ============================ FAQ ======================================= */
.faq-list{max-width:780px;margin:48px auto 0;display:flex;flex-direction:column;gap:12px;}
.faq{border:1px solid var(--gray-200);border-radius:16px;background:var(--white);overflow:hidden;}
.faq summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;font-size:17px;font-weight:600;letter-spacing:-.01em;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .pm{width:26px;height:26px;border-radius:50%;background:var(--gray-50);border:1px solid var(--gray-200);
  display:flex;align-items:center;justify-content:center;flex:none;transition:transform .2s var(--ease),background .2s;}
.faq summary .pm svg{width:15px;height:15px;}
.faq[open] summary .pm{transform:rotate(45deg);background:var(--yellow);border-color:var(--yellow-deep);}
.faq .ans{padding:0 22px 20px;font-size:15.5px;color:var(--gray-600);line-height:1.6;max-width:62ch;}

/* ============================ FINAL CTA (dark) ========================== */
.final{background:var(--black);color:#fff;border-radius:36px;margin:0 28px 28px;padding:88px 28px;text-align:center;
  overflow:hidden;position:relative;}
.final h2{font-size:clamp(34px,5vw,62px);color:#fff;max-width:16ch;margin:0 auto 18px;}
.final .lead{color:rgba(255,255,255,.62);max-width:44ch;margin:0 auto 30px;}
.final .hero-cta{justify-content:center;}
.final .creator-mini{display:flex;justify-content:center;gap:-10px;margin-bottom:26px;}
.final-faces{display:flex;justify-content:center;margin-bottom:24px;}
.final-faces img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2.5px solid var(--black);margin-left:-12px;box-shadow:0 0 0 1px rgba(255,255,255,.15);}
.final-faces img:first-child{margin-left:0;}

/* ============================ FOOTER ==================================== */
.footer{padding:64px 0 40px;}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;}
.footer .logo{margin-bottom:14px;}
.footer-blurb{font-size:14px;color:var(--gray-500);max-width:34ch;line-height:1.6;margin-bottom:18px;}
.socials{display:flex;gap:10px;}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid var(--gray-200);display:flex;
  align-items:center;justify-content:center;color:var(--gray-600);transition:.15s;}
.socials a:hover{background:var(--black);color:#fff;border-color:var(--black);}
.socials svg{width:17px;height:17px;}
.fcol h5{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-400);margin-bottom:16px;}
.fcol a{display:block;font-size:14.5px;color:var(--gray-600);margin-bottom:11px;font-weight:500;}
.fcol a:hover{color:var(--black);}
.footer-bot{display:flex;justify-content:space-between;align-items:center;margin-top:48px;padding-top:24px;
  border-top:1px solid var(--gray-200);font-size:13px;color:var(--gray-400);flex-wrap:wrap;gap:12px;}
.footer-bot .badges{display:flex;gap:10px;}
.store-badge{height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border-radius:10px;
  background:var(--black);color:#fff;font-size:13px;}
.store-badge svg{width:18px;height:18px;}
.store-badge span{display:flex;flex-direction:column;line-height:1.1;}
.store-badge b{font-weight:700;font-size:15px;white-space:nowrap;}
.store-badge small{font-size:9px;opacity:.7;line-height:1;font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;}

/* ============================ RESPONSIVE ================================ */
@media (max-width:980px){
  .feature{grid-template-columns:1fr;gap:32px;padding:44px 0;}
  .feature:nth-child(even) .feature-media{order:0;}
  .uc-grid{grid-template-columns:repeat(2,1fr);}
  .af-grid{grid-template-columns:repeat(2,1fr);}
  .footer-top{grid-template-columns:1fr 1fr;gap:28px;}
}
@media (max-width:860px){
  .nav-links{display:none;}
  .hero{padding:40px 0 30px;}
  .dropbox{padding:26px 20px;}
  .steps{grid-template-columns:1fr;}
  .pad{padding:64px 0;}
  .proof-div{display:none;}
  .creator-rail{flex-wrap:wrap;}
  .creator{width:150px;}
}
@media (max-width:560px){
  .uc-grid,.af-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;}
}