/* ============================================================
   CSS VARIABLES - Design System Tokens
   Mobile defaults defined here; desktop overrides in desktop.css
   ============================================================ */
:root {
  /* COLOR SYSTEM - Brand palette for all components */
  --color-page-bg: #ffffff;
  --color-bg-primary: #f5f2eb;
  --color-bg-secondary: #f4d2c5;
  --color-bg-tertiary: #ebf6ff;
  --color-bg-card: #fcf9f2;
  --color-bg-gradient: linear-gradient(
    180deg,
    var(--color-bg-primary) 0%,
    var(--color-bg-secondary) 100%
  );

  --color-body-text: #191c1d;
  --color-body-lighter: #3c4043;

  /* LAYOUT WIDTHS - Container constraints for desktop */
  --content-max-width: 1440px;
  --inner-content-max-width: 1154px;

  /* SPACING - Uses clamp() for responsive scaling (mobile → desktop) */
  --card-gap-spacing: clamp(1.125rem, 5.283vw - 0.1132rem, 2rem);

  /* HIGHLIGHT CARD PADDING - Scales with viewport for large feature blocks */
  --h-card-padding-block: clamp(1.75rem, 0.6887rem + 4.5283vw, 2.5rem);
  --h-card-padding-inline: clamp(1.5rem, 9.8113vw - 0.7995rem, 3.125rem);

  /* HIGHLIGHT CARD RADIUS - Proportional border-radius for large cards */
  --h-card-border-radius: clamp(2rem, 9.0566vw - 0.1226rem, 3.5rem);

  /* TYPOGRAPHY SCALE - Responsive font sizing using clamp() */
  --font-size-heading: clamp(2.375rem, 0.0755rem + 9.8113vw, 4rem);
  --letter-space-heading: clamp(-0.1094rem, -0.2717vw - 0.0007rem, -0.0644rem);
  --font-size-p: clamp(1.5rem, 0.0849rem + 6.0377vw, 2.5rem);
}

/* ============================================================
   GLOBAL ELEMENT RESETS
   ============================================================ */
body {
  margin: 0;
  font-family:
    "Google Sans Flex 72pt",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-weight: 400;
  color: var(--color-body-text);
  background-color: var(--color-page-bg);
}

/* Prevent orphaned words at line breaks for better readability */
p {
  text-wrap: pretty;
}

/* Make all images responsive by default */
img {
  width: 100%;
  display: block;
}

/* Superscript styling for reference numbers and annotations */
sup {
  font-size: 55%;
  -webkit-font-smoothing: unset;
  vertical-align: baseline; /* reset default browser behavior */
  position: relative;
  top: -0.6em;
  line-height: 0;
}

/* ============================================================
   LAYOUT & PAGE STRUCTURE
   ============================================================ */

/* Main page container - stacks sections vertically on mobile */
.page {
  margin: 0 auto;
  width: 100%;
  gap: 0;
  display: flex;
  flex-direction: column;
}

/* Limit section width to desktop max; .fullwidth sections ignore this */
.page > section:not(.fullwidth) {
  max-width: var(--content-max-width);
  margin: auto;
}

/* Inner content wrapper - adds horizontal padding on mobile, centers on large screens */
.content-container {
  padding-inline: var(--card-gap-spacing);
  max-width: var(--inner-content-max-width);
  margin: auto;
}

/* ============================================================
   HERO SECTION
   ============================================================ */

/* Full-width hero container */
.hero {
  width: 100vw;
  height: auto;
  padding: 0;
}

/* Hero image - maintains aspect ratio with object-fit */
.hero__display img {
  width: 100%;
  /* height: fit-content; */
  /* aspect-ratio: 640/640; */
  object-fit: contain;
}

/* ============================================================
   SECTION TYPOGRAPHY
   ============================================================ */

/* Main section heading - responsive sizing using clamp() */
.section__heading {
  font-weight: 500;
  font-size: var(--font-size-heading);
  line-height: 1.125;
  letter-spacing: var(--letter-space-heading);
  text-align: center;
  text-wrap: balance;
}

/* Section paragraph - consistent weight and responsive sizing */
.section__p {
  font-weight: 500;
  line-height: 1.2;
  font-size: var(--font-size-p);
  text-align: center;
}

/* Secondary product section - gradient background with positioned image */
.secondary-section__product {
  position: relative;
  background-image: var(--color-bg-gradient);
  width: 100vw;
  height: auto;
  aspect-ratio: 640/312;
}

/* Product image inside gradient container */
.secondary-section__product img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: contain;
}

/* Add spacing after full-width images and tile sections */
.section__fullwidth-img + .section__p,
.tile + .section__p {
  margin-top: clamp(1.75rem, 7.5472vw - 0.0189rem, 3rem);
}

.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--card-gap-spacing);
}

.bento__img {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.bento__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bento__card,
.highlight__card {
  background-color: var(--color-bg-card);
  border-radius: clamp(1.375rem, 6.7925vw - 0.217rem, 2.5rem);
 /*  padding-block: clamp(1.375rem, 6.792vw - 0.217rem, 2.5rem);  *//* 22 → 40 */
  padding-inline: clamp(1.75rem, 8.302vw - 0.196rem, 3.125rem); /* 28 → 50 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--card-gap-spacing);
}

.bento__card--light,
.highlight__card--light {
  background-color: var(--color-page-bg);
}

.bento__card-icon,
.highlight__card-icon {
  width: clamp(2.875rem, 12.8302vw - 0.1321rem, 5rem);
  aspect-ratio: 1/1;
  object-fit: contain;
}

.bento__card-p {
  font-size: var(--font-size-p);
  line-height: 1.2;
  font-weight: 500;
  text-wrap: balance;
}

/* ============================================================
   TILE COMPONENTS
   Flexible layout for product showcase sections
   ============================================================ */

/* Tile container - flexible column layout with large gaps on mobile */
.tile {
  display: flex;
  flex-direction: column;
  gap: clamp(2.875rem, 12.8302vw - 0.1321rem, 5rem);
  max-width: var(--inner-content-max-width);
  margin: auto;
}

/* Tight variant - reduces gap for compact layouts */
.tile--tight {
  gap: var(--card-gap-spacing);
}

/* Individual tile card - stacks content vertically */
.tile__card {
  display: flex;
  flex-direction: column;
  gap: clamp(1.625rem, 8.3019vw - 0.3208rem, 3rem);
  flex: 1 1 0;
}

/* Tile thumbnail image - maintains content object-fit */
.tile__thumb img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ============================================================
   HIGHLIGHT SECTION
   Feature showcase with large cards and images
   ============================================================ */

/* Highlight grid container - vertical layout on mobile */
.highlight-grid {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap-spacing);
}

/* Main highlight block - large feature card with image and text */
.highlight__main-blk {
  background-color: var(--color-page-bg);
  padding-block: var(--h-card-padding-block);
  padding-inline: var(--h-card-padding-inline);
  border-radius: var(--h-card-border-radius);

  display: flex;
  align-items: center;
  flex-direction: column-reverse;
  gap: var(--card-gap-spacing);
}

/* Container for highlight cards - stacks vertically on mobile */
.highlight__cards-blk {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap-spacing);
}

/* Caption and image wrappers - full width containers */
.highlight__caption,
.highlight__img {
  width: 100%;
}

/* Highlight image - right-aligned with auto margin */
.highlight__img {
  display: block;
  margin-left: auto;
  margin-right: 0;
}

/* Highlight image content - maintain aspect ratio */
.highlight__img img {
  object-fit: contain;
  width: 100%;
}

/* Highlight text styling - uses system typography */
.highlight__caption-txt,
.highlight__card-p {
  font-weight: 500;
  line-height: 1.2;
  font-size: var(--font-size-p);
}

/* Highlight card - inherits from .bento__card but with custom padding */
.highlight__card {
  padding-block: var(--h-card-padding-block);
  padding-inline: var(--h-card-padding-inline);
}

/* Gemini icon - responsive sizing, centered on card */
.icon-gemini {
  margin: auto;
  margin-bottom: clamp(0.625rem, 3.0189vw - 0.0825rem, 1.125rem);
  display: block;
  width: clamp(1.75rem, 8.3019vw - 0.1958rem, 3.125rem);
}

/* Legal text - mobile scales with clamp() for accessibility; desktop uses a fixed smaller size via desktop.css override */
.legal__p {
  color: var(--color-body-lighter);
  font-size: clamp(0.75rem, 3.7736vw - 0.1344rem, 1.375rem);
  line-height: 1.45;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* Hidden - completely removes element from layout */
.hidden {
  display: none;
}

.tw-balance {
  text-wrap: balance;
}

.tw-pretty {
  text-wrap: pretty;
}

/* SPACER UTILITIES - Responsive vertical spacing
   Mobile → Desktop heights:
   - spacer-80: 46px → 80px
   - spacer-120: 70px → 120px
   - spacer-160: 92px → 160px
*/

.spacer-80 {
  width: 100%;
  height: clamp(2.875rem, 12.8302vw - 0.1321rem, 5rem);
}

.spacer-120 {
  width: 100%;
  height: clamp(4.375rem, 18.8679vw - 0.0472rem, 7.5rem);
}

.spacer-160 {
  width: 100%;
  height: clamp(5.75rem, 25.6604vw - 0.2642rem, 10rem);
}

/* BACKGROUND COLOR UTILITIES - Brand color palette */

.bg-primary {
  background-color: var(--color-bg-primary);
}

.bg-secondary {
  background-color: var(--color-bg-secondary);
}

.bg-tertiary {
  background-color: var(--color-bg-tertiary);
}

/* Gradient background - soft blend of primary and secondary colors */
.bg-soft-gradient {
  background-color: var(--color-bg-gradient);
}

.text-nowrap {
  white-space: nowrap;
}