/*
  Godwitly landing page styles.

  Sections in this file:
    1. Design settings (colours, fonts, sizes) — change these first
    2. Base styles
    3. Shared pieces (container, buttons, icons, headings)
    4. Header + language switcher + mobile menu
    5. Hero
    6. Products
    7. Why Godwitly
    8. Call to action + footer
    9. Arabic / right-to-left adjustments
   10. Larger screens (tablet and desktop)

  The page is built "mobile first": the normal rules are for phones,
  and the @media rules near the end add changes for wider screens.
*/

/* ---------- 1. Design settings ---------- */
:root {
  /* Brand colours (taken from the live Godwitly site) */
  --color-brand: #c84c3c; /* terracotta: main buttons, highlights */
  --color-brand-hover: #a63d30;
  --color-brand-deep: #3f1510; /* deep maroon: big headings */
  --color-accent: #2f6f73; /* teal: the "Learn" product, focus outline */
  --color-success: #059669;
  --color-danger: #be123c; /* form error messages */

  /* Neutral colours */
  --color-page: #f8f7f5; /* warm off-white page background */
  --color-white: #ffffff;
  --color-text: #1e293b; /* main text */
  --color-text-soft: #334155; /* paragraphs */
  --color-text-muted: #556070; /* small grey text */
  --color-border: #e2e8f0;

  /* Product card backgrounds */
  --color-engage-bg: #fbeae3;
  --color-learn-bg: #e8f0ee;
  --color-resilience-bg: #f8e6e3;
  --color-icon-bg: #fbeae3;

  /* Fonts: English uses Rubik for headings and Inter for text */
  --font-heading: "Rubik", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Arabic uses Cairo for headings and IBM Plex Sans Arabic for text */
  --font-arabic-heading: "Cairo", "IBM Plex Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
  --font-arabic-body: "IBM Plex Sans Arabic", "Cairo", "Geeza Pro", Tahoma, sans-serif;

  /* Sizes */
  --page-width: 1280px;
  --page-gutter: 20px;
  --header-height: 80px;
  --radius-card: 24px;
  --shadow-card: 0 12px 32px rgba(15, 23, 42, 0.12);
}

/* ---------- 2. Base styles ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}

/* A clear outline for keyboard users on every link and button */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Sections that receive focus after a jump link should not show an outline */
section:focus,
footer:focus,
main:focus {
  outline: none;
}

/* Leave room for the header when jumping to a section */
section[id],
footer[id] {
  scroll-margin-top: 16px;
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--color-brand-deep);
  color: var(--color-white);
  font-weight: 600;
}

.skip-link:focus {
  top: 16px;
}

/* Anything marked hidden stays hidden, even if a class gives it a display style */
[hidden] {
  display: none !important;
}

/* Keep numbers like +20 10 1234 5678 on one line and in the right order */
.keep-together {
  white-space: nowrap;
  unicode-bidi: isolate;
}

/* The hidden SVG that stores all the icons */
.icon-sprite {
  display: none;
}

/* ---------- 3. Shared pieces ---------- */
.container {
  width: 100%;
  max-width: calc(var(--page-width) + 2 * var(--page-gutter));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--lg {
  width: 24px;
  height: 24px;
}

.text-brand {
  color: var(--color-brand);
}

.eyebrow {
  color: var(--color-brand);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section {
  padding-block: 64px;
}

.section-title {
  margin-top: 8px;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
}

/* Each heading line sits on its own row on desktop and flows on phones */
.section-title span {
  display: inline;
}

/* Pill-shaped buttons (they are links that scroll to sections) */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s;
}

.pill--primary {
  background: var(--color-brand);
  color: var(--color-white);
}

.pill--primary:hover {
  background: var(--color-brand-hover);
}

.pill--outline {
  border-color: var(--color-brand);
  background: rgba(255, 255, 255, 0.8);
  color: var(--color-brand-deep);
}

.pill--outline:hover {
  background: var(--color-white);
}

.pill--large {
  padding: 14px 28px;
  font-size: 16px;
}

.button-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 28px;
}

/* ---------- 4. Header ---------- */
.site-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-height);
}

.logo-link {
  display: inline-block;
  flex-shrink: 0;
}

.logo {
  width: auto;
  height: 32px;
}

.main-nav {
  display: none; /* shown on desktop, see section 10 */
}

.main-nav a,
.mobile-menu a {
  border-radius: 4px;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
}

.main-nav a:hover,
.mobile-menu a:hover {
  color: var(--color-brand);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Language switcher */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-white);
}

.lang-switch__globe {
  display: none;
  margin-inline: 8px 4px;
  color: var(--color-text-muted);
}

.lang-switch__btn {
  min-height: 36px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s;
}

.lang-switch__btn:lang(ar) {
  font-family: var(--font-arabic-body);
  font-size: 14px;
}

.lang-switch__btn:hover {
  background: #f1f5f9;
}

.lang-switch__btn[aria-pressed="true"] {
  background: var(--color-brand);
  color: var(--color-white);
}

/* Mobile menu button (hamburger) */
.menu-button {
  display: inline-flex;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text);
}

.menu-button__close,
.menu-button[aria-expanded="true"] .menu-button__open {
  display: none;
}

.menu-button[aria-expanded="true"] .menu-button__close {
  display: block;
}

.mobile-menu {
  position: absolute;
  top: 100%;
  inset-inline: var(--page-gutter);
  padding: 20px;
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mobile-menu[hidden] {
  display: none;
}

/* ---------- 5. Hero ---------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--header-height));
  overflow: hidden;
}

.hero__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

.hero__flock {
  position: absolute;
  top: 8px;
  inset-inline-end: 16px;
  width: 96px;
}

.hero__grid {
  position: relative;
  display: grid;
  flex: 1;
  align-items: center;
  gap: 32px;
  padding-block: 48px 40px;
}

.hero__title {
  color: var(--color-brand-deep);
  font-family: var(--font-heading);
  font-size: clamp(30px, 9.3vw, 38px); /* grows with the screen, between 30px and 38px */
  font-weight: 700;
  line-height: 1.08;
}

.hero__title span {
  display: block;
}

.hero__intro {
  max-width: 28rem;
  margin-top: 20px;
  color: var(--color-text-soft);
  line-height: 1.65;
}

.hero__devices {
  width: 100%;
  max-width: 800px;
  align-self: end;
  justify-self: end;
}

/* ---------- 6. Products ---------- */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.section-head__text {
  max-width: 24rem;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.65;
}

.tabs-row {
  display: none; /* tabs only appear on desktop */
}

.product-panels {
  display: grid;
  gap: 20px;
}

.product {
  padding: 24px;
  border-radius: var(--radius-card);
}

/* Colours for each product card */
.product--engage {
  --product-bg: var(--color-engage-bg);
  --product-color: var(--color-brand);
  --product-small-text: var(--color-brand-hover); /* a bit darker so small text is easy to read */
}

.product--learn {
  --product-bg: var(--color-learn-bg);
  --product-color: var(--color-accent);
  --product-small-text: var(--color-accent);
}

.product--resilience {
  --product-bg: var(--color-resilience-bg);
  --product-color: var(--color-brand-deep);
  --product-small-text: var(--color-brand-deep);
}

.product {
  background: var(--product-bg);
}

.product__eyebrow {
  color: var(--product-small-text);
}

.product__name {
  margin-top: 4px;
  color: var(--product-color);
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
}

.product__blurb {
  margin-top: 12px;
  color: var(--color-text-soft);
  font-size: 15px;
  line-height: 1.65;
}

.check-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-soft);
  font-size: 14px;
}

.check-list .icon {
  color: var(--product-small-text);
}

.product__media {
  position: relative;
  margin-top: 24px;
}

.product__media img {
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
}

/* Little app cards that float over each picture (desktop only) */
.ui-card {
  display: none;
  padding: 16px;
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.ui-card__title {
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
}

.ui-card__muted {
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 1.4;
}

.ui-card--results {
  width: 232px;
}

.ui-card--readiness,
.ui-card--team {
  width: 272px;
}

.bars {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.bars li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.bars__label {
  width: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.bars__track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: #f1f5f9;
}

.bars__track span {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--color-brand);
}

.bars__pct {
  width: 28px;
  color: #475569;
  text-align: end;
}

.bars .is-correct .bars__label {
  color: var(--color-success);
}

.bars .is-correct .bars__track span {
  background: var(--color-success);
}

.readiness,
.team {
  display: flex;
  align-items: center;
  gap: 12px;
}

.donut {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  transform: rotate(-90deg);
}

.donut circle {
  fill: none;
  stroke-width: 5;
}

.donut__track {
  stroke: #e2e8f0;
}

.donut__fill {
  stroke: var(--color-accent);
  stroke-linecap: round;
  /* 75% of the circle: circumference is 2 × π × 18 ≈ 113 */
  stroke-dasharray: 84.8 113;
}

.steps {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  color: #334155;
  font-size: 11px;
}

.steps li {
  display: flex;
  align-items: center;
  gap: 4px;
}

.step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
}

.step--done {
  border: 0;
  background: var(--color-accent);
  color: var(--color-white);
}

.step--done .icon {
  width: 10px;
  height: 10px;
  stroke-width: 3;
}

.step--current {
  border: 4px solid var(--color-accent);
}

.team__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-brand-deep);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 600;
}

.submitted {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #ecfdf5;
  color: #065f46;
  font-size: 12px;
  font-weight: 500;
}

/* ---------- 7. Why Godwitly ---------- */
.why__grid {
  display: grid;
  gap: 40px;
}

.benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 24px;
}

.benefit__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-icon-bg);
  color: var(--color-brand);
}

.benefit__icon .icon {
  width: 24px;
  height: 24px;
  stroke-width: 1.75;
}

.benefits h3 {
  margin-top: 12px;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
}

.benefits p {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* ---------- 8. Call to action + footer ---------- */
.cta {
  position: relative;
  overflow: hidden;
}

.cta__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

.cta__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 42rem;
  margin-inline: auto;
  padding: 64px 20px 144px;
  text-align: center;
}

.cta__title {
  color: var(--color-brand-deep);
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
}

.cta__content p {
  margin-top: 12px;
  color: var(--color-text-soft);
}

.cta__content .pill {
  margin-top: 24px;
}

.site-footer {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding-block: 16px;
}

.site-footer p {
  color: var(--color-text-muted);
  font-size: 12px;
  text-align: center;
}

/* ---------- 8b. Contact form ---------- */
.notify-form,
.form-success {
  width: 100%;
  max-width: 640px;
  margin-top: 28px;
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  text-align: start; /* the section is centered; the form reads normally */
}

.form-grid {
  display: grid;
  gap: 16px;
}

.field label {
  display: block;
  margin-bottom: 6px;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
}

.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: var(--color-white);
  color: var(--color-text);
  font: inherit;
  font-size: 16px; /* 16px stops phones from zooming in when you tap a field */
}

.field textarea {
  min-height: 112px;
  resize: vertical;
}

.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--color-accent);
  border-radius: 12px;
  outline-offset: 1px;
}

/* Red border on fields with a problem */
.field [aria-invalid="true"] {
  border-color: var(--color-danger);
}

.field__hint {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 13px;
}

.field__error {
  margin-top: 6px;
  color: var(--color-danger);
  font-size: 13px;
  font-weight: 500;
}

.field--check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
}

.field--check input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--color-brand);
}

.field--check label {
  margin: 0;
  font-weight: 500;
}

.field__error--check {
  margin-inline-start: 30px;
}

/* Hidden from people; only bots fill it in */
.form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-submit {
  width: 100%;
  margin-top: 20px;
  border: 0;
}

.form-submit:disabled {
  opacity: 0.7;
  cursor: wait;
}

.form-status {
  margin-top: 12px;
  text-align: center;
}

.form-status__text {
  color: var(--color-text-muted);
  font-size: 14px;
}

.form-status.is-error .form-status__text {
  color: var(--color-danger);
}

.form-retry {
  margin-top: 10px;
}

/* Thank-you box shown after sending */
.form-success {
  text-align: center;
}

.form-success:focus {
  outline: none;
}

.form-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ecfdf5;
  color: var(--color-success);
}

.form-success__icon .icon {
  width: 28px;
  height: 28px;
  stroke-width: 2.5;
}

.form-success h3 {
  margin-top: 12px;
  color: var(--color-brand-deep);
  font-family: var(--font-heading);
  font-size: 22px;
}

.form-success p {
  margin-top: 6px;
  color: var(--color-text-soft);
}

/* ---------- 9. Arabic / right-to-left adjustments ---------- */
/* The browser already flips the layout when <html dir="rtl">.
   These rules handle the details it cannot guess. */
html[lang="ar"] body {
  font-family: var(--font-arabic-body);
  line-height: 1.7;
}

html[lang="ar"] .hero__title,
html[lang="ar"] .section-title,
html[lang="ar"] .product__name,
html[lang="ar"] .cta__title {
  font-family: var(--font-arabic-heading);
  font-weight: 800;
  line-height: 1.4; /* Arabic letters need more vertical room */
}

/* Arabic has no capital letters, and letter-spacing breaks joined letters */
html[lang="ar"] .eyebrow {
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
}

/* Arabic text sizes.
   Arabic letters look smaller than English letters at the same pixel size,
   so every Arabic text size is 2–3px bigger than its English version.
   To make all Arabic text bigger or smaller, change the numbers here. */
html[lang="ar"] .main-nav a {
  font-size: 17px;
}

html[lang="ar"] .mobile-menu a {
  font-size: 18px;
}

html[lang="ar"] .pill,
html[lang="ar"] .check-list li,
html[lang="ar"] .benefits p {
  font-size: 16px;
}

html[lang="ar"] .product__blurb,
html[lang="ar"] .section-head__text,
html[lang="ar"] .benefits h3 {
  font-size: 17px;
}

html[lang="ar"] .hero__intro,
html[lang="ar"] .cta__content p {
  font-size: 18px;
}

html[lang="ar"] .site-footer p {
  font-size: 14px;
}

html[lang="ar"] .field label {
  font-size: 16px;
}

html[lang="ar"] .field__hint,
html[lang="ar"] .field__error,
html[lang="ar"] .form-status__text {
  font-size: 15px;
}

html[lang="ar"] .form-success h3 {
  font-family: var(--font-arabic-heading);
}

/* Email and phone are typed left-to-right, but sit on the right like the other fields */
html[dir="rtl"] .field input[dir="ltr"] {
  text-align: right;
}

/* Section text blocks get a little more width so the bigger text
   doesn't wrap into a narrow column */
html[lang="ar"] .hero__intro {
  max-width: 32rem;
}

html[lang="ar"] .section-head__text {
  max-width: 28rem;
}

/* Arabic step names are longer, so the Readiness card is a little wider */
html[lang="ar"] .ui-card--readiness {
  width: 330px;
}

html[lang="ar"] .steps li {
  white-space: nowrap;
}

html[lang="ar"] .ui-card__muted,
html[lang="ar"] .bars li,
html[lang="ar"] .steps {
  font-size: 12px;
}

/* Arrows point the way you read: right-to-left in Arabic */
[dir="rtl"] .flip-in-rtl {
  transform: scaleX(-1);
}

/* The birds fly towards the reading direction */
[dir="rtl"] .hero__flock {
  transform: scaleX(-1);
}

/* ---------- 10. Larger screens ---------- */

/* Small phones: hide the globe so the header fits */
@media (min-width: 400px) {
  .lang-switch__globe {
    display: block;
  }
}

/* Tablets (640px and wider) */
@media (min-width: 640px) {
  :root {
    --page-gutter: 32px;
  }

  .logo {
    height: 40px;
  }

  .hero__flock {
    width: 160px;
  }

  .hero__title {
    font-size: 48px;
  }

  .button-row {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .product {
    padding: 32px;
  }

  .cta__content {
    padding-bottom: 176px;
  }

  /* Two columns of fields; the message box spans both */
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .field--full {
    grid-column: 1 / -1;
  }

  .notify-form,
  .form-success {
    padding: 32px;
  }
}

/* Desktop (1024px and wider) */
@media (min-width: 1024px) {
  .main-nav {
    display: flex;
    gap: 40px;
  }

  .menu-button,
  .mobile-menu {
    display: none;
  }

  .hero__flock {
    top: 24px;
    inset-inline-end: 10%;
    width: 300px;
  }

  .hero__grid {
    grid-template-columns: 500px 1fr;
    padding-block: 40px 64px;
  }

  .hero__title {
    font-size: 52px;
  }

  /* Products: header + tabs + panel fill one screen */
  .products {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
    padding-block: 32px;
  }

  .section-head {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
  }

  .section-title,
  .cta__title {
    font-size: 36px;
  }

  .section-title span {
    display: block;
  }

  /* The "Why Godwitly" heading stays a little smaller, like the original */
  .why .section-title {
    font-size: 30px;
  }

  .tabs-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
  }

  .tabs {
    display: inline-flex;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-white);
  }

  .tab {
    padding: 8px 20px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s, color 0.2s;
  }

  .tab:hover {
    background: #f1f5f9;
  }

  .tab[aria-selected="true"] {
    background: var(--color-brand);
    color: var(--color-white);
  }

  html[lang="ar"] .tab {
    font-size: 17px;
  }

  /* All panels share one spot, so the box keeps the height of the tallest one
     and the page never jumps when you switch tabs. */
  .product-panels {
    gap: 0;
  }

  .product {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 400px) 1fr;
    align-items: center;
    gap: 40px;
    padding: 40px;
    border-radius: 28px;
  }

  .product.is-hidden {
    visibility: hidden;
  }

  .product__name {
    margin-top: 8px;
    font-size: 36px;
  }

  .product__media {
    width: fit-content;
    max-width: 580px;
    margin: 0;
    margin-inline-start: auto;
  }

  .product__media img {
    width: auto;
    max-width: 100%;
    max-height: min(420px, calc(100svh - 23rem));
    margin: 0;
    margin-inline-start: auto;
  }

  .ui-card {
    position: absolute;
    bottom: -24px;
    inset-inline-end: 24px;
    display: block;
  }

  .why {
    padding-block: 96px;
  }

  .why__grid {
    grid-template-columns: 320px 1fr;
  }

  .benefits {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .benefit__icon {
    width: 64px;
    height: 64px;
  }

  .benefit__icon .icon {
    width: 32px;
    height: 32px;
  }

  .cta__content {
    padding-bottom: 192px;
  }
}

/* Very wide screens: the 1280px content no longer needs side padding */
@media (min-width: 1344px) {
  :root {
    --page-gutter: 0px;
  }
}

/* People who ask their system for less motion get no animations */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}