/*
Theme Name: COSMOPICK
Theme URI: https://cosmopick.com
Author: COSMOPICK
Description: COSMOPICK - Cosmetic Product News Landing Page
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: cosmopick
*/

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; background: #fff; color: #0a0a0a; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ===== DESIGN TOKENS ===== */
:root {
  --clr-dark:    #0a0a0a;
  --clr-bg:      #f6f4f2;
  --clr-accent:  #8e4737;
  --clr-rose:    #a0566b;
  --clr-gray:    #6b6b6b;
  --clr-border:  #e8e4e0;
  --clr-white:   #ffffff;
  --max-w:       1440px;
}

/* ===== LAYOUT ===== */
.container { max-width: var(--max-w); margin: 0 auto; }
.site-wrapper { max-width: var(--max-w); margin: 0 auto; overflow: hidden; }

/* ===== NAVIGATION ===== */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 40px 0 60px;
  width: 100%;
}
.site-logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 45px 0 20px;
}
.site-logo .logo-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  letter-spacing: 4.4px;
  white-space: nowrap;
}
.site-logo .logo-tagline {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 11px;
  color: #d6d6d6;
  letter-spacing: 0.44px;
}

/* ===== HERO SECTION ===== */
.hero {
  position: relative;
  width: 100%;
  height: 900px;
  display: flex;
  align-items: center;
  gap: 52px;
  padding: 0 60px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-bg img.bg1 {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: bottom;
}
.hero-bg .gradient1 {
  position: absolute;
  inset: 0;
  background: linear-gradient(-60.7deg, rgba(10,10,10,0) 62.2%, rgba(10,10,10,0.8) 76.9%);
}
.hero-bg img.bg2 {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-bg .gradient2 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(19,10,8,0.4) 0%, rgba(19,10,8,0) 24.5%);
}
.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: 720px;
  flex-shrink: 0;
}
.hero-text { display: flex; flex-direction: column; gap: 32px; }
.hero-headline { display: flex; flex-direction: column; gap: 16px; color: #fff; }
.hero-headline h1 {
  font-family: 'Marcellus', serif;
  font-size: 64px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1.28px;
  color: #fff;
}
.hero-headline p {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  max-width: 590px;
}
.hero-badges { display: flex; gap: 24px; align-items: center; }
.hero-badge {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hero-badge .check-icon {
  width: 16px; height: 14px;
  transform: rotate(-24.72deg);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.hero-badge .check-icon img { width: 13px; height: 9px; }
.hero-badge span {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}
.hero-cta { display: flex; gap: 12px; align-items: center; }
.app-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 28px 12px 16px;
  border: 1px solid rgba(255,255,255,0.3);
  width: 173px;
  flex-shrink: 0;
}
.app-btn .app-icon { 
  width: 30px; 
  height: 30px; 
  flex-shrink: 0; 
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-btn .app-icon img { 
  max-width: 22px; 
  max-height: 22px; 
  object-fit: contain;
}
.app-btn .app-icon img[alt="Apple"] {
  max-width: 25px;
  max-height: 25px;
  transform: none;
}
.app-btn .app-text { display: flex; flex-direction: column; gap: 2px; }
.app-btn .app-text .store-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  line-height: 1.42;
}
.app-btn .app-text .coming-soon {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.6);
}

/* Hero product cards — coded from Figma nodes 621:469 & 621:457 */
.hero-cards {
  position: absolute;
  right: 40px;
  bottom: 40px;
  display: flex;
  gap: 18px;
  z-index: 2;
  align-items: flex-end;
  transform-origin: bottom right;
}
.hero-card {
  position: relative;
  width: 183px;
  height: 359px;
  background: #fff;
  border: 1px solid #e8e4e0;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
/* Sprite layer: 659×439 div with background-size matching the sprite AR exactly,
   then a solid-black mask rectangle punches out just the product area */
.hero-card-product-layer {
  position: absolute;
  width: 659px;
  height: 439px;
  background-image: url('assets/images/products-sprite.jpg');
  background-size: 659px 439px;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(#000 0%, #000 100%);
  mask-image: linear-gradient(#000 0%, #000 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* Lancôme serum: top-right of the sprite. Mask rect at (482,5) size 85×208 */
.hero-card--lancome .hero-card-product-layer {
  left: -433px;
  top: 44px;
  -webkit-mask-size: 85px 208px;
  mask-size: 85px 208px;
  -webkit-mask-position: 482px 5px;
  mask-position: 482px 5px;
}
/* VB Blush Stylus: top-left of the sprite. Mask rect at (91,5) size 69×207 */
.hero-card--vb .hero-card-product-layer {
  left: -37px;
  top: 44px;
  -webkit-mask-size: 69px 207px;
  mask-size: 69px 207px;
  -webkit-mask-position: 91px 5px;
  mask-position: 91px 5px;
}
/* Text area — pinned to card bottom */
.hero-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 11px 27px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-card-name {
  font-family: 'Marcellus', serif;
  font-size: 16px;
  font-weight: 400;
  color: #0a0a0a;
  line-height: 1.2;
  margin: 0;
}
.hero-card-url-row {
  display: flex;
  align-items: center;
  gap: 3px;
}
.hero-card-globe {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
}
.hero-card-url-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: #a0566b;
  text-decoration: underline;
  line-height: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 145px;
}

/* ===== FEATURES SECTION ===== */
.features-section {
  background: var(--clr-bg);
  padding: 120px 80px 0;
  display: flex;
  gap: 120px;
  align-items: flex-start;
}
.features-left {
  flex-shrink: 0;
  width: 627px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.features-left h2 {
  font-family: 'Marcellus', serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.25;
  color: #0a0a0a;
}
.features-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.feature-item {
  display: flex;
  gap: 32px;
  align-items: center;
  padding: 20px 0;
}
.feature-item + .feature-item { border-top: 1px solid var(--clr-border); }
.feature-icon {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* inner box: 76px tall × 58px wide — matches the largest natural icon dims */
  padding: 2px 11px;
}
/* SVGs now have explicit px intrinsic sizes; just constrain to inner box */
.feature-icon img { max-width: 100%; max-height: 100%; }
.feature-text { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.feature-text h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #0a0a0a;
}
.feature-text p {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #6b6b6b;
  max-width: 380px;
}

/* ===== HOW IT WORKS (THREE STEPS) ===== */
.steps-section {
  background: var(--clr-bg);
  padding: 100px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.steps-section h2 {
  font-family: 'Marcellus', serif;
  font-size: 40px;
  font-weight: 400;
  color: #0a0a0a;
  text-align: center;
}
.steps-grid {
  display: flex;
  gap: 186px;
  justify-content: center;
  align-items: flex-start;
}
.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 240px;
}
.step-number {
  font-family: 'Marcellus', serif;
  font-size: 55px;
  font-weight: 400;
  color: #8e4737;
  line-height: 1;
  align-self: center;
}
/* ===== CSS PHONE MOCKUPS ===== */
.css-phone {
  position: relative;
  width: 210px;
  height: 456px;
  border: 4px solid #000;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  flex-shrink: 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
/* Notch pill */
.css-phone::before {
  content: '';
  position: absolute;
  top: 5.25px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 17.7px;
  background: #000;
  border-radius: 50px;
  z-index: 30;
}
/* Home indicator */
.css-phone::after {
  content: '';
  position: absolute;
  bottom: 3.8px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 2.4px;
  background: rgba(0,0,0,0.4);
  border-radius: 50px;
  z-index: 30;
}

/* Status bar */
.p-status {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 22.4px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  z-index: 20;
}
.p-time {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 8.1px;
  color: #0a0a0a;
}

/* Hamburger (Phones 1 & 2) */
.p-menu {
  position: absolute;
  top: 27.7px; right: 9.5px;
  width: 22.9px; height: 22.9px;
  background: #f4f2ef;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.9px;
  z-index: 10;
}
.p-menu span {
  display: block;
  width: 8.6px; height: 1px;
  background: #0a0a0a;
}

/* COSMOPICK logo */
.p-logo {
  position: absolute;
  top: 28.6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  z-index: 10;
}
.p-logo-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 10.5px;
  color: #0a0a0a;
  letter-spacing: 2.1px;
  white-space: nowrap;
}
.p-logo-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 5.25px;
  color: #6b6b6b;
  letter-spacing: 0.21px;
  white-space: nowrap;
}

/* FaceGym product image (cropped from 1280×853 PNG) */
.p-product {
  position: absolute;
  left: 48px; top: 76.5px;
  width: 113px; height: 277px;
  background: url('assets/images/products-bg.png') no-repeat;
  background-size: 876px 584px;
  background-position: -103px -293px;
  z-index: 1;
}

/* Product info bar at bottom (Phones 1 & 2) */
.p-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0 9.5px 30.5px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 5.7px;
  z-index: 10;
}
.p-info-left { flex: 1; display: flex; flex-direction: column; gap: 2.9px; }
.p-info-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 10px;
  color: #0a0a0a;
  line-height: 1.15;
}
.p-info-url {
  font-family: 'DM Sans', sans-serif;
  font-size: 6px;
  color: #a0566b;
}
.p-info-actions {
  display: flex;
  flex-direction: column;
  gap: 7.6px;
}
.p-icon-btn {
  width: 19px; height: 19px;
  background: #f4f2ef;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-icon-btn svg { width: 11px; height: 11px; }

/* Phone 2 overlay */
.p-dark-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  border-radius: 16px;
  z-index: 15;
}

/* Phone 2 bottom sheet */
.p-sheet {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: white;
  border-radius: 20px 20px 0 0;
  padding: 3.8px 9.5px 19px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 25;
}
.p-sheet-handle {
  width: 17.2px; height: 2.4px;
  background: rgba(0,0,0,0.3);
  border-radius: 50px;
  align-self: center;
}
.p-sheet-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 8.6px;
  color: #0a0a0a;
  line-height: 1;
}
.p-sheet-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 6.2px;
  color: #6b6b6b;
  line-height: 1.2;
  margin-top: -4px;
}
.p-sheet-divider {
  height: 0.5px;
  background: rgba(201,197,193,0.5);
}
.p-sheet-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 5.25px;
  color: #6b6b6b;
  letter-spacing: 0.24px;
  text-transform: uppercase;
}
.p-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 3.8px;
}
.p-cat {
  border: 0.5px solid #e8e4e0;
  padding: 3.8px 5.7px;
  border-radius: 3.8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 6.2px;
  color: #6b6b6b;
  white-space: nowrap;
}
.p-save-btn {
  background: #0a0a0a;
  color: white;
  border: none;
  border-radius: 6.7px;
  height: 26.7px;
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 7.6px;
}

/* Phone 3 header */
.p-keeps-nav {
  position: absolute;
  top: 27.7px; left: 9.5px; right: 9.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}
.p-back {
  width: 19px; height: 19px;
  background: #f4f2ef;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #0a0a0a;
  line-height: 1;
}
.p-keeps-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  color: #0a0a0a;
}
.p-avatar {
  width: 19px; height: 19px;
  border-radius: 50%;
  background: #c8bfb8;
}

/* Phone 3 filter chips */
.p-filters {
  position: absolute;
  top: 55px; left: 9.5px; right: 9.5px;
  display: flex;
  gap: 1.9px;
  overflow: hidden;
  z-index: 10;
}
.p-filter-chip {
  padding: 3.3px 6.7px;
  border: 0.5px solid #e8e4e0;
  border-radius: 19px;
  font-family: 'DM Sans', sans-serif;
  font-size: 7.6px;
  color: #0a0a0a;
  white-space: nowrap;
  flex-shrink: 0;
}
.p-filter-chip.active {
  background: #0a0a0a;
  color: white;
  border-color: #0a0a0a;
}

/* Phone 3 2x2 grid */
.p-keeps-grid {
  position: absolute;
  top: 76px; left: 9.5px; right: 9.5px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.8px;
}

/* Individual product card */
.p-card {
  position: relative;
  height: 177px;
  border: 0.5px solid #e8e4e0;
  border-radius: 3.8px;
  overflow: hidden;
  background: white;
}
.p-card-info-area {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0 4.3px 13.6px;
}
.p-card-cat-label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 5px;
  color: #6b6b6b;
  letter-spacing: 0.24px;
  text-transform: uppercase;
  font-weight: 700;
}
.p-card-name-text {
  display: block;
  font-family: 'Marcellus', serif;
  font-size: 7.6px;
  color: #0a0a0a;
  line-height: 1.2;
  margin-top: 1px;
}

/* Product image crops from products-bg.png (1280×853) */
.p-img {
  position: absolute;
  background: url('assets/images/products-bg.png') no-repeat;
}
/* FaceGym EMS device in grid card */
.p-img-facegym {
  left: 22.5px; top: 13.5px; width: 48.5px; height: 119px;
  background-size: 376px 250px;
  background-position: -44px -126px;
}
/* Prada blush */
.p-img-prada {
  left: 14.1px; top: 30px; width: 65px; height: 89px;
  background-size: 298px 198px;
  background-position: -110px -9px;
}
/* YSL Libre Berry Crush */
.p-img-ysl {
  left: 15.5px; top: 22.7px; width: 63px; height: 107px;
  background-size: 332px 221px;
  background-position: -126px -111px;
}
/* Majolica Majorca mascara */
.p-img-mascara {
  left: 22px; top: 18.7px; width: 49px; height: 108px;
  background-size: 332px 221px;
  background-position: -235px -108px;
}
.step-text { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.step-text h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #0a0a0a;
}
.step-text p {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #6b6b6b;
}

/* ===== AUDIENCE SECTION ===== */
.audience-section {
  background: #fff;
  display: flex;
  gap: 56px;
  align-items: stretch;
  height: 661px;
  overflow: hidden;
  padding-left: 80px;
}
.audience-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  padding: 110px 0;
}
.audience-content-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}
.audience-content h2 {
  font-family: 'Marcellus', serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  color: #0a0a0a;
  margin-top: 0;
  margin-bottom: 12px;
}
.audience-content p.audience-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: #6b6b6b;
}
.audience-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 475px;
  width: 100%;
  align-content: flex-start;
}
.audience-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-right: 12px;
  flex-shrink: 0;
}
/* Check icon with rotation — Figma rotates the slash shape -24.72deg to form a tick */
.tag-check-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15.487px;
  height: 13.184px;
  flex-shrink: 0;
}
.tag-check-rotate {
  transform: rotate(-24.72deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tag-check {
  display: block;
  width: 13.155px;
  height: 8.458px;
  flex-shrink: 0;
}
.audience-tag span {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #0a0a0a;
  white-space: nowrap;
}
.audience-image {
  width: 840px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
/* Background photo: slightly oversized and offset — max-width:none overrides global img rule */
.audience-image .img-bg {
  position: absolute;
  top: -5.1%;
  left: -12.02%;
  width: 113.54%;
  max-width: none;
  height: 110.2%;
  object-fit: cover;
  display: block;
}
.audience-image .img-overlay {
  position: absolute;
  inset: 0;
  background: #d8ccc3;
}
/* Foreground model: sized to ~92% of panel height, centred, anchored to bottom */
.audience-image .img-foreground {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 92%;
  width: auto;
  max-width: none;
  display: block;
}

/* ===== CTA SECTION ===== */
.cta-section {
  background: #0a0a0a;
  padding: 130px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.cta-section .cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 1280px;
}
.cta-logo-text {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: clamp(60px, 12vw, 172px);
  letter-spacing: 0.2em;
  color: #fff;
  white-space: nowrap;
  text-align: center;
}
.cta-tagline {
  font-family: 'Forum', serif;
  font-size: 40px;
  color: #fff;
  text-align: center;
}
.cta-buttons { display: flex; gap: 12px; align-items: center; margin-top: 0; }

/* ===== FOOTER ===== */
.site-footer {
  background: #000;
  padding: 16px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-footer span {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  letter-spacing: -0.32px;
  white-space: nowrap;
}

/* ===== RESPONSIVE ===== */

/*
 * Breakpoints:
 *  ≤1200px  — compress spacing/type; ALL layouts stay two-column; hero cards stay
 *  ≤1024px  — reduce hero content width to give cards breathing room; phones zoom starts
 *  ≤768px   — hide hero cards; stack features + audience; phones 3-across zoomed
 *  ≤600px   — single column everywhere; phones stack vertically at full size
 *  ≤400px   — final size reductions for very small screens
 */

/* ── Subtle compression  ≤1200px ── */
@media (max-width: 1200px) {

  /* Hero — shrink content box so cards don't collide with text */
  .hero { padding: 0 48px; }
  .hero-content { max-width: 560px; }
  .hero-headline h1 { font-size: 54px; }

  /* Keep hero cards; scale them slightly */
  .hero-cards { gap: 12px; right: 32px; bottom: 60px; transform: scale(0.79); }

  /* Features — keep two columns, tighten gap + padding */
  .features-section { gap: 72px; padding: 100px 48px 0; }
  .features-left { width: 480px; }

  /* Steps */
  .steps-section { padding: 100px 48px; }
  .steps-grid { gap: 48px; }

  /* Audience — keep two columns, shrink image panel */
  .audience-image { width: 500px; }

  /* CTA */
  .cta-logo-text { font-size: clamp(56px, 9vw, 150px); letter-spacing: 0.18em; }
}

/* ── Tablet (landscape + portrait)  ≤1024px ── */
@media (max-width: 1024px) {

  /* Hero */
  .hero { height: auto; min-height: 640px; padding: 0 36px; }
  .site-header { padding: 0 36px 0 36px; }
  .hero-content { max-width: 460px; gap: 40px; }
  .hero-headline h1 { font-size: 46px; letter-spacing: -0.8px; }
  .hero-headline p { font-size: 16px; max-width: 100%; }
  .hero-badge span { font-size: 15px; }
  .hero-cards { right: 24px; bottom: 48px; gap: 10px; transform: scale(0.67); }

  /* Features — still two columns */
  .features-section { gap: 48px; padding: 80px 36px 0; }
  .features-left { width: 380px; }
  .features-left h2 { font-size: 34px; }
  .feature-icon { width: 64px; height: 64px; padding: 2px 9px; }
  .feature-text p { max-width: 100%; }

  /* Steps — three phones in a row, zoomed to fit */
  .steps-section { padding: 80px 32px; gap: 20px; }
  .steps-section h2 { font-size: 34px; }
  .steps-grid { gap: 32px; }
  .step-item { width: 190px; }
  .css-phone { zoom: 0.82; }
  .step-number { font-size: 44px; }
  .step-text h3 { font-size: 15px; }
  .step-text p { font-size: 13px; line-height: 20px; }

  /* Audience — still two columns */
  .audience-section { height: auto; min-height: 540px; padding-left: 36px; }
  .audience-content { padding: 80px 0; }
  .audience-content-inner { gap: 28px; }
  .audience-content h2 { font-size: 34px; }
  .audience-content p.audience-desc { font-size: 15px; }
  .audience-image { width: 400px; height: auto; min-height: 100%; }
  .audience-tags { max-width: 100%; gap: 6px; }
  .audience-tag span { font-size: 16px; }

  /* CTA */
  .cta-section { padding: 100px 48px; gap: 32px; }
  .cta-logo-text { font-size: clamp(44px, 7.5vw, 120px); letter-spacing: 0.15em; }
  .cta-tagline { font-size: 32px; }

  /* Footer */
  .site-footer { padding: 16px 36px; }
}

/* ── Switch to single-column layouts  ≤768px ── */
@media (max-width: 768px) {

  /* Hero — hide cards, full text width */
  .hero { min-height: 580px; padding: 96px 28px 56px; }
  .site-header { padding: 0 28px; }
  .hero-cards { display: none; }
  .hero-content { max-width: 100%; gap: 36px; }
  .hero-headline h1 { font-size: 42px; }
  .hero-headline p { font-size: 16px; max-width: 560px; }
  .hero-badges { gap: 16px; flex-wrap: wrap; }
  .hero-badge span { font-size: 15px; }

  /* Features — stack */
  .features-section { flex-direction: column; gap: 40px; padding: 72px 28px 0; }
  .features-left { width: 100%; }
  .features-left h2 { font-size: 30px; }
  .feature-text p { max-width: 100%; }

  /* Steps — three phones still in a row, smaller zoom */
  .steps-section { padding: 72px 20px; gap: 16px; }
  .steps-section h2 { font-size: 30px; }
  .steps-grid { gap: 16px; }
  .step-item { width: 160px; }
  .css-phone { zoom: 0.70; }
  .step-number { font-size: 40px; }
  .step-text h3 { font-size: 14px; }
  .step-text p { font-size: 12px; line-height: 18px; }

  /* Audience — stack: content above, image below */
  .audience-section {
    flex-direction: column;
    height: auto;
    padding-left: 0;
    min-height: auto;
  }
  .audience-content { padding: 56px 28px; }
  .audience-content-inner { justify-content: flex-start; gap: 28px; }
  .audience-content h2 { font-size: 30px; }
  .audience-content p.audience-desc { font-size: 15px; }
  .audience-image { width: 100%; height: 380px; min-height: unset; }
  .audience-tags { max-width: 100%; }
  .audience-tag span { font-size: 15px; }

  /* CTA */
  .cta-section { padding: 80px 28px; gap: 24px; }
  .cta-logo-text { font-size: clamp(36px, 6.5vw, 90px); letter-spacing: 0.12em; }
  .cta-tagline { font-size: 26px; }

  /* Footer */
  .site-footer { padding: 16px 28px; }
}

/* ── Mobile  ≤600px — Figma mobile frame (390px) ── */
@media (max-width: 600px) {

  /* Header: center logo like Figma */
  .site-header { padding: 0 16px; justify-content: center; top: 46px; }
  .site-logo { padding: 0; align-items: center; text-align: center; }
  .site-logo .logo-name { font-size: 22px; letter-spacing: 4.4px; }
  .site-logo .logo-tagline { font-size: 11px; }

  /* Hero: column layout, content + cards at bottom */
  .hero {
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 40px;
    padding: 0 16px 16px;
    height: 790px;
    min-height: 790px;
  }
  .hero-content { max-width: 100%; width: 100%; gap: 40px; }
  .hero-text { gap: 32px; }
  .hero-headline h1 { font-size: 36px; letter-spacing: -0.72px; }
  .hero-headline p { font-size: 18px; max-width: 100%; }
  .hero-badges { flex-direction: column; gap: 16px; align-items: flex-start; }
  .hero-badge span { font-size: 16px; }
  /* CTA buttons: horizontal, side by side (173px each to match Figma) */
  .hero-cta { display: flex; flex-direction: row; gap: 12px; }
  .hero-cta .app-btn { flex: 1; min-width: 0; padding: 12px 10px 12px 12px; justify-content: center; }
  /* Product cards: override hidden, shown in a row below CTA */
  .hero-cards {
    position: static;
    display: flex;
    flex-direction: row;
    gap: 18px;
    align-items: flex-start;
    width: 100%;
    flex-shrink: 0;
    transform: none;
    zoom: 0.6767;
  }

  /* Features */
  .features-section { padding: 60px 16px 30px; gap: 40px; }
  .features-left h2 { font-size: 28px; line-height: 1.3; }
  .feature-icon { width: 70px; height: 70px; padding: 2px 10px; }
  .feature-item { gap: 20px; }
  .feature-text h3 { font-size: 18px; }
  .feature-text p { font-size: 14px; line-height: 22px; }

  /* Steps: horizontal scroll — matches Figma mobile (phones at 170px via zoom 0.81) */
  .steps-section { padding: 40px 0 80px; gap: 24px; overflow: hidden; }
  .steps-section h2 { font-size: 28px; padding: 0 48px; }
  .steps-grid {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 66px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 48px 20px;
    scrollbar-width: none;
    margin-top: 0;
  }
  .steps-grid::-webkit-scrollbar { display: none; }
  .step-item { width: 170px; max-width: none; flex-shrink: 0; align-items: center; }
  .css-phone { zoom: 0.81; }
  .step-number { font-size: 55px; }
  .step-text h3 { font-size: 15px; }
  .step-text p { font-size: 12px; line-height: 18px; }

  /* Audience */
  .audience-section { gap: 32px; }
  .audience-content { padding: 60px 16px 0; }
  .audience-content-inner { gap: 32px; justify-content: flex-start; }
  .audience-content h2 { font-size: 28px; margin-bottom: 0; }
  .audience-content p.audience-desc { font-size: 16px; line-height: 26px; }
  .audience-tags { gap: 8px; max-width: 100%; flex-wrap: wrap; }
  .audience-tag span { font-size: 16px; }
  .audience-image { height: 307px; }

  /* CTA — matches Figma: 130px vertical padding, large logo, buttons side by side */
  .cta-section { padding: 130px 16px; }
  .cta-inner { gap: 40px; }
  .cta-logo-text { font-size: 48px; letter-spacing: 9.65px; white-space: nowrap; }
  .cta-tagline { font-size: 24px; }
  .cta-buttons { flex-direction: row; gap: 12px; }
  .cta-buttons .app-btn { flex: 1; min-width: 0; padding: 12px 10px 12px 12px; }
  .cta-section .app-icon { flex-shrink: 0; }

  /* Footer */
  .site-footer { flex-direction: row; justify-content: space-between; gap: 0; padding: 16px 8px; text-align: left; }
  .site-footer span { font-size: 16px; }
}

/* ===== TERMS AND LEGAL PAGE ===== */

/*
 * Figma: entire page bg #f6f4f2. Logo is absolute at top-left on beige.
 * Logo padding: pl-60px pr-40px pt-45px. Title section: pt-130px pb-50px px-80px.
 * Content: pt-50px pb-100px px-80px. Content width: 680px centered.
 */

/* Full-page beige wrapper */
.terms-page {
  position: relative;
  background: var(--clr-bg);
  overflow-x: hidden;
}

/*
 * Logo on terms page: .terms-page .site-header has specificity (0,2,0), which
 * beats the base .site-header (0,1,0) and all landing-page responsive overrides
 * regardless of cascade order. No more logo/content clipping.
 */
.terms-page .site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  width: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  z-index: 10;
  padding: 0 40px 0 60px;
}
.terms-page .site-header .logo-name  { color: var(--clr-dark); }
.terms-page .site-header .logo-tagline { color: var(--clr-gray); }

/* Title section — pt-130px to clear the absolute logo */
.terms-title-wrap {
  padding: 130px 80px 50px;
  text-align: center;
}
.terms-title-wrap h1 {
  font-family: 'Marcellus', serif;
  font-weight: 400;
  font-size: 64px;
  color: var(--clr-dark);
  line-height: 1.1;
}

/* Body — single centered column, 680px wide */
.terms-body {
  padding: 50px 80px 100px;
}
.terms-columns {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 70px;
}

/* Each section column: centered via margin auto, max-width constrains */
.terms-column {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* Section header: border-top + title + date */
.terms-column-header {
  border-top: 1px solid rgba(107, 107, 107, 0.24);
  padding-top: 70px;
  padding-bottom: 20px;
  text-align: center;
}
.terms-column-header h2 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.64px;
  text-transform: capitalize;
  color: var(--clr-dark);
  line-height: 1;
  margin-bottom: 8px;
}
.terms-updated {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--clr-gray);
  line-height: 26px;
}

/* Numbered items */
.terms-item {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.terms-num {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--clr-dark);
  list-style: decimal;
  padding-left: 36px;
  margin: 0;
}
.terms-num li { line-height: 1.2; }

.terms-text {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--clr-dark);
  line-height: 22px;
}
.terms-text p { margin: 0; line-height: 22px; }
.terms-text p + p { margin-top: 10px; }
.terms-text a { color: var(--clr-dark); text-decoration: underline; }

/* Thin dividers between items */
.terms-divider {
  border: none;
  border-top: 1px solid rgba(107, 107, 107, 0.24);
  margin: 0;
}

/*
 * ── Terms page: Tablet  ≤1024px (Figma frame: 810px) ──
 * Uses .terms-page .site-header (0,2,0) to beat all landing-page .site-header overrides.
 * Logo: px-32px; logo pt-32px pb-20px (Figma: h-118px)
 * Title: pt-110px pb-40px; h1: 48px
 * Body: px-32px; 680px column auto-centered via margin
 */
@media (max-width: 1024px) {
  .terms-page .site-header { padding: 0 32px; }
  .terms-page .site-header .site-logo { padding: 32px 0 20px; }

  .terms-title-wrap { padding: 110px 32px 40px; }
  .terms-title-wrap h1 { font-size: 48px; }

  .terms-body { padding: 0 32px 80px; }
  .terms-column { max-width: 680px; }
}

/*
 * ── Terms page: Mobile  ≤600px (Figma frame: 390px) ──
 * Logo: px-16px; title: pt-120px 36px; body px-16px pb-80px
 * Column gap: 62px; items gap: 32px; section header: pt-62px; h2: 28px
 */
@media (max-width: 600px) {
  .terms-page .site-header { padding: 0 16px; justify-content: flex-start; }
  .terms-page .site-header .site-logo { padding: 24px 0 20px; }

  .terms-title-wrap { padding: 100px 16px 40px; }
  .terms-title-wrap h1 { font-size: 36px; line-height: 1.15; }

  .terms-body { padding: 0 16px 80px; }
  .terms-columns { gap: 62px; }
  .terms-column { max-width: 100%; gap: 32px; }

  .terms-column-header { padding-top: 62px; padding-bottom: 20px; }
  .terms-column-header h2 { font-size: 28px; letter-spacing: -0.56px; }
  .terms-updated { font-size: 14px; line-height: 24px; }

  .terms-item { gap: 20px; }
  .terms-num { font-size: 24px; }
  .terms-text { font-size: 16px; line-height: 22px; }
}

/* ── Terms page: Small mobile  ≤390px ── */
@media (max-width: 390px) {
  .terms-title-wrap h1 { font-size: 32px; }
  .terms-body { padding: 0 12px 80px; }
  .terms-column-header h2 { font-size: 24px; }
}

/* Slider Tracker */
.slider-tracker {
  display: none;
}

/* ── Mobile Steps Slider ── */
@media (max-width: 768px) {
  .steps-section {
    padding: 40px 48px 80px 48px;
  }
  .steps-grid {
    gap: 66px;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    width: 100%;
    padding-bottom: 20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .steps-grid::-webkit-scrollbar {
    display: none;
  }
  .step-item {
    scroll-snap-align: center;
    flex-shrink: 0;
  }
  .slider-tracker {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
  }
  .tracker-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #c4c4c4;
    transition: all 0.3s ease;
  }
  .tracker-dot.active {
    width: 24px;
    height: 24px;
    background-color: transparent;
    border: 1.5px solid #8e4737;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tracker-dot.active::after {
    content: '';
    width: 8px;
    height: 8px;
    background-color: #8e4737;
    border-radius: 50%;
  }
}

/* ── Small mobile  ≤400px ── */
@media (max-width: 400px) {
  .hero-headline h1 { font-size: 30px; }
  .css-phone { zoom: 0.72; }
  .step-item { width: 150px; }
  .cta-logo-text { font-size: 36px; letter-spacing: 7px; }
  .cta-tagline { font-size: 20px; }
  .features-section { padding-left: 16px; padding-right: 16px; }
  .audience-content { padding: 48px 16px 0; }
  .site-header { padding: 0 16px; }
}