/* inline styles */
/* Mobile text (visible by default, hidden on desktop) */
      .text-mobile {
        display: inline-block;
      }
.text-desktop {
        display: none;
      }
/* Desktop text (hidden by default, visible on desktop) */
      @media (min-width: 641px) {
        .text-mobile {
          display: none;
        }
.text-desktop {
          display: inline;
        }
        }

/* defaults.css */
/* Reset styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
.page {
  width: 100%;
  overflow-x: clip;
}

* {
  font-variant-ligatures: none;
  font-feature-settings: "liga" off;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

/* Font definitions */
@font-face {
  font-family: "Google Sans Flex 72pt";
  src: url("/content/dam/static-library/google/2026/google-fonts/GoogleSansFlex_72pt-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Google Sans Flex 72pt";
  src: url("/content/dam/static-library/google/2026/google-fonts/GoogleSansFlex_72pt-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* desktop.css */
/* ============================================================
   DESKTOP BREAKPOINT OVERRIDES (641px and up)
   
   Override mobile defaults for tablet and desktop screens.
   Only define what changes; don't repeat mobile styles.
   ============================================================ */
@media (min-width: 641px) {
  :root {
    /* Desktop-optimized padding for larger screens */
    --h-card-padding-block: 2.8rem;
    --h-card-padding-inline: 4.5rem;
    --h-card-border-radius: 1.25rem;

    /* Fixed heading scale for desktop (no mobile scaling) */
    --font-size-heading: clamp(4rem, 3.4rem + 1.5vw, 4.75rem) !important;
    --letter-space-heading: -2%;
    /* Fixed body text on desktop */
    --font-size-p: 2rem !important;
  }

  /* Hero image - wider aspect ratio for desktop */
  /* .hero__display img {
    aspect-ratio: 1440/810;
  } */

  /* Section paragraph - increased line-height and padding */
  .section__p {
    line-height: 1.25;
    padding-inline: 1rem;
  }

  /* Secondary product - wider aspect ratio for desktop */
  .secondary-section__product {
    aspect-ratio: 1440/800;
  }

  /* Increase spacing after full-width sections on desktop */
  .section__fullwidth-img + .section__p,
  .tile + .section__p {
    margin-top: clamp(2rem, 3.8rem + -2vw, 3rem);
    text-wrap: balance;
  }

  /* TILE LAYOUT - Horizontal row on desktop instead of vertical stack */
  .tile,
  .tile--tight {
    flex-direction: row;
    gap: 1.5rem;
  }

  /* Tile cards stretch equally with adjusted gap */
  .tile__card {
    gap: clamp(2rem, 3.8rem + -2vw, 3rem);
  }

  /* BENTO GRID - 4-column layout with image on left
     Layout areas:
     | img | card1 | card2 |
     | img | card3 | card4 |
  */
  .bento {
    grid-template-columns: 4fr 3fr 3fr !important;
    gap: 1.3125rem;
    grid-template-areas:
      "img card1 card2"
      "img card3 card4";
  }

  /* Reversed bento - image on right instead of left */
  .bento--reversed {
    grid-template-columns: 3fr 3fr 4fr !important;
    grid-template-areas:
      "card1 card2 img"
      "card3 card4 img";
  }

  /* Assign grid areas to elements based on DOM order */
  .bento__img {
    grid-area: img;
  }
  .bento__card:nth-of-type(2) {
    grid-area: card1;
  }
  .bento__card:nth-of-type(3) {
    grid-area: card2;
  }
  .bento__card:nth-of-type(4) {
    grid-area: card3;
  }
  .bento__card:nth-of-type(5) {
    grid-area: card4;
  }

  /* Desktop bento card - tighter spacing and rounded corners */
  .bento__card {
    border-radius: clamp(1.25rem, 3.5rem + -2.5vw, 2.5rem);
    padding-block: 2.5rem;
    padding-inline: clamp(2.5rem, 3.625rem - 1.25vw, 3.125rem);
    gap: clamp(1.25rem, 2.6rem + -1.5vw, 2rem);
  }

  /* Highlight card adjustments for desktop layout */
  .highlight__card {
    border-radius: clamp(1.25rem, 3.5rem + -2.5vw, 2.5rem);
    gap: clamp(1.25rem, 2.6rem + -1.5vw, 2rem);
    flex: 1;
    justify-content: flex-start;
  }

  /* Card paragraph - larger on desktop */
  .bento__card-p {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }

  /* Card icons - fixed size on desktop */
  .bento__card-icon,
  .highlight__card-icon {
    width: 3rem !important;
  }

  /* Highlight grid - increased gap for spacing */
  .highlight-grid {
    gap: 1.3125rem;
  }

  /* Main highlight block - horizontal layout with image/text side-by-side */
  .highlight__main-blk {
    padding: 1.25rem 1.75rem 1.25rem 4.5rem;
    flex-direction: row !important;
    gap: 0;
  }

  /* Highlight text - larger and tighter line-height */
  .highlight__caption-txt,
  .highlight__card-p {
    line-height: 1.25;
    font-size: 1.5rem !important;
  }

  /* Caption width constraint for readability */
  .highlight__caption-txt {
    max-width: 28rem;
  }

  /* Highlight cards - horizontal row layout on desktop */
  .highlight__cards-blk {
    flex-direction: row;
    gap: 1.5rem;
  }

  /* Gemini icon - slightly constrained on desktop */
  .icon-gemini {
    width: clamp(3rem, 3.225rem + -0.25vw, 3.125rem);
    margin-bottom: clamp(1rem, 1.225rem + -0.25vw, 1.125rem);
  }

  /* Fixed size override for desktop - single value only, no responsive scaling */
  .legal__p {
    font-size: 0.75rem;
    line-height: 1.5;
  }

  /* SPACER UTILITIES - Fixed heights on desktop (no scaling) */
  .spacer-80 {
    height: 5rem;
  }

  .spacer-120 {
    height: 7.5rem;
  }

  .spacer-160 {
    height: 10rem;
  }

  /* OFFERS MODULE - desktop layout */
  .offers__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 14px 26px;
  }

  .offers__card--ai {
    grid-row: span 3;
  }

  .offers__stack {
    grid-row: span 3;
    gap: 14px;
  }

  .offers__stack .offers__card {
    flex: 1;
  }

  .offers__title--sub {
    font-size: 3.125rem;
    line-height: 1.1;
  }

  .offers__card-p {
    font-size: 1.5rem;
    line-height: 1.25;
  }

  .offers__value {
    font-size: 3.09375rem;
    line-height: 1.1;
  }

  .offers__label {
    font-size: 1.40625rem;
    line-height: 1.3;
  }
}

/* ============================================================
   LARGE DESKTOP BREAKPOINT (1154px and up)

   Refinements for very wide screens.
   ============================================================ */
@media (min-width: 1154px) {
  /* Remove side padding on large screens - content is centered */
  .content-container {
    padding-inline: 0;
  }
}

/* ============================================================
   TABLET BREAKPOINT FIX (641px - 1023px)

   Special handling for mid-range viewports where default
   responsive scaling doesn't look good. Uses fixed sizes.
   ============================================================ */

/* FOR BENTO BOXES & HIGHLIGHT GRID ONLY DUE TO LAYOUT NOT VISUALLY
PLEASING ON THIS VIEWPORTS - Fixed sizes (no responsive resize) */

@media (min-width: 641px) and (max-width: 1023px) {
  /* Card layout - fixed dimensions for better appearance on tablets */
  .bento__card,
  .highlight__card {
    /* Fixed size - single value only, no responsive scaling */
    border-radius: 1.25rem;
    padding-block: 1.125rem;
    padding-inline: 1.25rem;
    gap: 0.875rem;
  }

  /* Card icons - fixed square size */
  .bento__card-icon,
  .highlight__card-icon {
    /* Fixed size - single value only, no responsive scaling */
    height: 1.75rem;
    width: 1.75rem;
  }

  /* Card text - consistent readable size */
  .bento__card-p,
  .highlight__caption-txt,
  .highlight__card-p {
    /* Fixed size - single value only, no responsive scaling */
    font-size: 1.125rem;
  }
}

/* global.css */
/* ============================================================
   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
   ============================================================ */
.page {
  margin: 0;
  font-family:
    "Google Sans Flex 72pt",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
  font-weight: 400;
  color: var(--color-body-text) !important;
  background-color: var(--color-page-bg) !important;
}

/* 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 !important;
  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:fit-content;
  margin: auto;
}

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

/* Full-width hero container */
.hero {
  width: 100%;
  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 !important;
  font-size: var(--font-size-heading) !important;
  line-height: 1.125 !important;
  text-align: center !important;
  font-family:
    "Google Sans Flex 72pt",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
  text-wrap: balance;
  color: var(--color-body-text) !important;
}

.section_sixth__heading {
  color: var(--color-body-white) !important;
}

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

/* Secondary product section - gradient background with positioned image */
.secondary-section__product {
  position: relative;
  background-image: var(--color-bg-gradient);
  width: 100%;
  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 !important;
  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: row;
  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: row;
  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;
}
.nowrappingText{
  text-wrap:auto !important;
}
/* 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 !important;
  line-height: 1.2 !important;
  font-size: var(--font-size-p);
  color: var(--color-body-text) !important;
}

/* 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;
}

/* 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;
}

/* ============================================================
   OFFERS MODULE
   UK offer module above the footer
   ============================================================ */

.offers__title--sub {
  font-size: clamp(2.25rem, 4vw, 3.125rem) !important;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.offers__card {
  background-color: var(--color-page-bg);
  border-radius: 20px;
}

.offers__card--youtube {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3.5rem, 12.5vw, 5.625rem) clamp(1.5rem, 10vw, 9.375rem);
}

.offers__card-content {
  width: 100%;
  max-width: 51.8125rem;
}

.offers__card-content--left {
  text-align: left;
}

.offers__card-content--center {
  text-align: center;
  max-width: 27.25rem;
}

.offers__card-content--center .offers__card-p {
  text-align: center;
}

.offers__logo {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1rem;
}
.text-mobile-under-img{
  margin-top:1rem;
}
.offers__logo--youtube {
  max-width: 22.5rem !important;
}

.offers__logo--ai {
  max-width: 22.75rem;
}
.offer-p.text-desktop{
  text-wrap:auto !important;
}
.offer-p .text-desktop{
  text-wrap:auto !important;
}
.offers__logo--gemini {
  max-width: 11.75rem;
}

.offers__logo--health {
  max-width: 27.5rem;
}

.offers__card-p {
  font-size: clamp(1.125rem, 1.75vw, 1.5rem);
  line-height: 1.25;
  font-weight: 500;
  margin-top: 1.25rem;
}

.offers__grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.offers__stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.offers__card--ai {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 12.5vw, 5rem) clamp(1.5rem, 6vw, 4.0625rem);
}

.offers__card--gemini,
.offers__card--health {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(1.5rem, 4vw, 2.9rem) clamp(1.5rem, 6vw, 4rem);
}

.offers__card--storage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(0.75rem, 2vw, 1.7rem) clamp(1.5rem, 6vw, 4rem);
}

.offers__value {
  font-size: clamp(2rem, 5vw, 3.09375rem);
  line-height: 1.1;
  font-weight: 500;
}

.offers__label {
  font-size: clamp(1rem, 2vw, 1.40625rem);
  line-height: 1.3;
  font-weight: 500;
}

/* mobile.css */


@media (max-width: 640px) {
	:root {
		/* COLOR SYSTEM - Brand palette for all components */
		--color-bg-linear-primary: linear-gradient(to bottom,
									rgba(233, 234, 221, 1) 0%,
									rgba(233, 235, 221, 1) 11%,
									rgba(233, 235, 221, 1) 29%,
									rgba(233, 235, 222, 1) 50%,
									rgba(234, 236, 222, 1) 88%,
									rgba(232, 234, 220, 1) 100%);

	}

	.bg-linear-primary {
		/*background-color: var(--color-bg-primary);*/
		background: var(--color-bg-linear-primary);
	}
    .tile, .tile--tight {
        flex-direction: column;
        gap: 1.5rem;
    }
    .bento__card-p {
        font-size: var(--font-size-p) !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
    }
    .highlight__cards-blk {
        display: flex;
        flex-direction: column;
        gap: var(--card-gap-spacing);
    }
    .highlight__caption-txt, .highlight__card-p {
        font-weight: 500 !important;
        line-height: 1.2 !important;
        font-size: var(--font-size-p) !important;
    }
    .offers__grid {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
}
p.offer-card-margin {
	margin: 0px !important;
}
p.offer-card-margin.tb {
    font-size: 24px;
    font-weight: 500;
}
p.offer-card-margin.cloud {
    font-size: 24px;
    font-weight: 500;
}