/* Custom overrides for Certage landing page responsive adjustments */

/* Define a global container width for large screens.  This value
   controls the maximum width of content sections so that they don’t
   stretch across the entire viewport on wide monitors.  Adjust
   --container if you need the layout narrower or wider. */
:root {
  --container: 1140px;
}

/* Constrain the width of key sections and center them on the page.  By
   default Teleport exports every section at full viewport width,
   resulting in very long line lengths and inconsistent layouts.  These
   rules set a maximum width and add horizontal padding so content
   remains legible and aligned. */
.homepage-variant3-frame110,
.homepage-variant3-frame52,
.homepage-variant3-frame212,
.homepage-variant3-frame35,
.homepage-variant3-frame22 {
  max-width: var(--container);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Reduce excessive vertical padding in the header area and ensure
   elements stay in a single line.  Without this rule the header can
   balloon to an unreasonable height when the viewport is wide. */
.homepage-variant3-frame110 {
  padding-top: 1rem;
  padding-bottom: 1rem;
  align-items: center;
  white-space: nowrap;
}

/* Constrain the hero content (text + image) to the container width and
   allow it to wrap gracefully.  Assign flexible widths so that the
   text and image share space and collapse into a single column on
   smaller screens. */
.homepage-variant3-frame29 {
  max-width: var(--container);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.homepage-variant3-frame51 {
  flex: 1 1 300px;
  min-width: 300px;
}

.homepage-variant3-chat-gpt-image25ago20251038141 {
  flex: 1 1 300px;
  max-width: 600px;
  aspect-ratio: auto;
  height: auto;
}

/* Centre the “Built for European Compliance” title and place the
   European Union flag on the far right.  By default the title and
   flag are spaced unevenly with flexbox; positioning the flag
   absolutely allows the heading to be centred regardless of the
   available width. */
.homepage-variant3-frame34 {
  /* Make the header container full width so the title can truly be centred. */
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.homepage-variant3-text23 {
  display: block;
  text-align: center;
  width: 100%;
}

.homepage-variant3-twemojiflageuropeanunion {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Note: We previously attempted to make every Teleport text class bold by
   applying a blanket rule to `[class^="homepage-variant3-text"]`.  However,
   this resulted in paragraphs and small copy being too heavy.  Remove
   that rule so the original font weights (as defined in index.css) are
   respected.  Only targeted headings are adjusted elsewhere if needed. */

/* Targeted font-weight overrides: make only headings and important
   labels extra-bold.  This list was derived from the Teleport export
   by matching each class to its role in the layout.  Feel free to
   adjust or extend it if additional headings need emphasis. */
.homepage-variant3-text11,
.homepage-variant3-text13,
.homepage-variant3-text15,
.homepage-variant3-text16,
.homepage-variant3-text19,
.homepage-variant3-text21,
.homepage-variant3-text23,
.homepage-variant3-text33,
.homepage-variant3-text34,
.homepage-variant3-text36,
.homepage-variant3-text38,
.homepage-variant3-text40,
.homepage-variant3-text42,
.homepage-variant3-text43,
.homepage-variant3-text46,
.homepage-variant3-text48,
.homepage-variant3-text50,
.homepage-variant3-text52 {
  font-weight: 800 !important;
}

/* Hero stacking on narrower screens: stack the text and image
   vertically and center them. */
@media (max-width: 768px) {
  .homepage-variant3-frame29 {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  .homepage-variant3-frame51,
  .homepage-variant3-chat-gpt-image25ago20251038141 {
    flex-basis: auto;
    width: 100%;
    max-width: 100%;
  }
  /* Hide the arrows between How It Works steps and stack the steps */
  .homepage-variant3-frame12,
  .homepage-variant3-frame13 {
    display: none;
  }
  .homepage-variant3-frame61,
  .homepage-variant3-frame711,
  .homepage-variant3-frame8 {
    flex: 1 1 100%;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 1.5rem;
  }

  .homepage-variant3-frame715 {
    width: 70%;
  }
  /* Stack the IdMe hero image and text (frame24) vertically */
  .homepage-variant3-frame24 {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  .homepage-variant3-frame213,
  .homepage-variant3-frame25 {
    width: 100%;
    max-width: 100%;
  }
}

/* Built for European Compliance: ensure the callout items stack nicely
   on medium screens.  We keep our earlier adjustments for the header
   centring and flag positioning. */
@media (max-width: 900px) {
  /* Reduce gap and stack callout items */
  .homepage-variant3-frame114 {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }
  .homepage-variant3-frame26,
  .homepage-variant3-frame27,
  .homepage-variant3-frame28 {
    width: 100%;
    align-items: center;
    text-align: center;
  }
}

/* Why choose: adjust spacing and columns for the four benefit cards. */
/* On medium screens (≤900px) show two cards per row; on small screens
   (≤600px) stack them one per row. */
@media (max-width: 900px) {
  .homepage-variant3-frame181 {
    gap: 2rem;
  }
  .homepage-variant3-frame151,
  .homepage-variant3-frame161,
  .homepage-variant3-frame171,
  .homepage-variant3-frame182 {
    flex: 1 1 calc(50% - 1rem);
    width: calc(50% - 1rem);
    max-width: calc(50% - 1rem);
  }
}
@media (max-width: 600px) {
  .homepage-variant3-frame151,
  .homepage-variant3-frame161,
  .homepage-variant3-frame171,
  .homepage-variant3-frame182 {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }
  .homepage-variant3-frame181 {
    gap: 1.5rem;
  }
}

/* IdMe feature list: similar adjustments to allow two per row and
   stacking on small screens. */
@media (max-width: 900px) {
  .homepage-variant3-frame183 {
    gap: 2rem;
  }
  .homepage-variant3-frame152,
  .homepage-variant3-frame162,
  .homepage-variant3-frame172,
  .homepage-variant3-frame184 {
    flex: 1 1 calc(50% - 1rem);
    width: calc(50% - 1rem);
    max-width: calc(50% - 1rem);
  }
}
@media (max-width: 600px) {
  .homepage-variant3-frame152,
  .homepage-variant3-frame162,
  .homepage-variant3-frame172,
  .homepage-variant3-frame184 {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }
  .homepage-variant3-frame183 {
    gap: 1.5rem;
  }
}

/* Minor typographic adjustments on very small screens for better
   readability. */
@media (max-width: 600px) {
  .homepage-variant3-text11 {
    font-size: 32px;
  }
  .homepage-variant3-text12,
  .homepage-variant3-text14 {
    font-size: 18px;
  }
  .homepage-variant3-text13 {
    font-size: 24px;
  }
}

/* On small screens, remove fixed pixel widths from text elements so they
   wrap naturally and are not clipped.  Teleport assigns explicit
   widths like 493px or 500px to many spans, which causes text
   truncation on mobile.  The following rule overrides those widths. */
@media (max-width: 768px) {
  [class^="homepage-variant3-text"] {
    width: auto !important;
    max-width: 100% !important;
    display: block;
  }
}

/*
 * Additional mobile tweaks
 *
 * The original Teleport export uses large fixed font sizes and widths
 * throughout the page.  On narrow screens (phones), these values
 * cause text to overflow or be clipped, and layout elements such as
 * the contact button or IdMe section may disappear due to overflow
 * hidden.  The following rules adjust typography, layout and
 * overflow for viewports under ~600px.
 */
@media (max-width: 600px) {
  .homepage-variant3-frame41 {
    gap: 0px;
    padding: 0px;
  }

  .homepage-variant3-frame111 {
    gap: 0px;
  }
  /* Header: shrink the logo and contact button, and ensure they fit
     side by side. */
  .homepage-variant3-certage01 {
    max-width: 120px !important;
    height: auto !important;
  }
  /* Position the contact button on the right and reduce its size */
  .homepage-variant3-frame31 {
    margin-left: auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    
  }
  .homepage-variant3-text10 {
    font-size: 14px !important;
    padding: 0.4rem 0.8rem !important;
  }

  /* Add some horizontal padding to the hero text so it isn’t flush
     against the viewport edge. */
  .homepage-variant3-frame51 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Scale down major headings and subheadings on mobile to prevent
     wrapping and improve readability.  The font-size values below
     follow a loose hierarchy: primary hero heading → section headings
     → subheadings. */
  .homepage-variant3-text11 { /* AI Powered Anonymous Age Estimation */
    font-size: 32px !important;
    line-height: 1.25 !important;
  }
  .homepage-variant3-text12 { /* Hero paragraph */
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  .homepage-variant3-text13 { /* Request Demo button text */
    font-size: 18px !important;
  }
  .homepage-variant3-text14 { /* Launch offer text */
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* Section headings (How It Works, Why choose Certage, IdMe, etc.) */
  .homepage-variant3-text15,  /* How It Works */
  .homepage-variant3-text23,  /* Built for European Compliance */
  .homepage-variant3-text33,  /* Why choose Certage */
  .homepage-variant3-text42,  /* Boost Certage with IdMe: */
  .homepage-variant3-text43 { /* The Double Anonymity Framework */
    font-size: 24px !important;
    line-height: 1.3 !important;
  }

  /* Subheadings inside sections */
  .homepage-variant3-text16,  /* Anonymous selfie heading */
  .homepage-variant3-text18,  /* AI Age Estimation */
  .homepage-variant3-text19,  /* Pass Decision */
  .homepage-variant3-text21,
  .homepage-variant3-text34,  /* Anonymous by Design */
  .homepage-variant3-text36,  /* Regulation-Aware */
  .homepage-variant3-text38,  /* Fast and Scalable */
  .homepage-variant3-text40,  /* Security */
  .homepage-variant3-text46,  /* Double Anonymity */
  .homepage-variant3-text48,  /* Fast Access for Returning Users */
  .homepage-variant3-text50,  /* Blockchain Anchoring */
  .homepage-variant3-text52 { /* Escalated Verification */
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  .homepage-variant3-frame719 {
    width: 70%;
  }
  /* Paragraphs or supporting copy */
    /* Anonymous selfie paragraph */
  .homepage-variant3-text35,  /* Anonymous by Design paragraph */
  .homepage-variant3-text37,  /* Regulation-Aware paragraph */
  .homepage-variant3-text39,  /* Fast and Scalable paragraph */
  .homepage-variant3-text41,  /* Security paragraph */
  .homepage-variant3-text44,  /* IdMe section description */
  .homepage-variant3-text45,  /* IdMe section result */
  .homepage-variant3-text47,  /* Double Anonymity description */
  .homepage-variant3-text49,  /* Fast Access description */
  .homepage-variant3-text51,  /* Blockchain Anchoring description */
  .homepage-variant3-text53  /* Escalated Verification description */
  {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Callout items: reduce font size slightly on mobile */
  .homepage-variant3-text24,
  .homepage-variant3-text28,
  .homepage-variant3-text32,
  .homepage-variant3-text30 {
    font-size: 18px !important;
    line-height: 1.4 !important;
  }

  /* Ensure the callout boxes span full width on small screens */
  .homepage-variant3-frame26,
  .homepage-variant3-frame27,
  .homepage-variant3-frame28 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Prevent headings like Regulation-Aware from splitting awkwardly by
     lowering the font size when the container is narrow.  In larger
     viewports the default (32px) size is retained. */
  .homepage-variant3-text36 {
    font-size: 22px !important;
  }
}

/* The IdMe container uses overflow hidden and a fixed width.  This
   causes the feature list to be truncated on small screens.  Remove
   the fixed width and allow overflow to be visible. */
.homepage-variant3-frame201 {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.homepage-variant3-certage03 {
width: 120px;
height: auto;
}

.homepage-variant3aflogonexial081 {
  width: 90px;
  height: auto;
}


/* ========= FR/EN layout hardening (blocchi con testo lungo) ========= */

/* Contenitore centrale */


/* WHY CHOOSE: 2 colonne desktop, 1 colonna mobile + allineamento alto */
.homepage-variant3-frame181{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(16px,2.2vw,28px) clamp(24px,3vw,40px);
  align-items: start;
}
@media (max-width: 900px){
  .homepage-variant3-frame181{ grid-template-columns: 1fr; }
}

/* Ogni “card” con icona + testo su griglia, allineamento alto */
.homepage-variant3-frame151,
.homepage-variant3-frame161,
.homepage-variant3-frame171,
.homepage-variant3-frame182{
  display: grid !important;
  grid-template-columns: 68px 1fr;
  gap: 16px;
  align-items: start;
}

/* Dimensione icone uniforme */
.homepage-variant3-mdianonymous,
.homepage-variant3-maplawyer,
.homepage-variant3-mdithundercircle,
.homepage-variant3-mdisecuritylockoutline{
  width: 56px; height: auto; margin-top: 4px;
}

/* Titoli/sottotitoli più “elastici” (FR è più lungo) */
.homepage-variant3-text34,
.homepage-variant3-text36,
.homepage-variant3-text38,
.homepage-variant3-text40{
  font-size: clamp(20px,2.2vw,28px);
  line-height: 1.2;
  margin: 0 0 8px;
  font-weight: 800;
}
.homepage-variant3-text35,
.homepage-variant3-text37,
.homepage-variant3-text39,
.homepage-variant3-text41{
  font-size: clamp(14px,1.6vw,16px);
  line-height: 1.55;
  max-width: 45ch; /* limita la riga, aiuta ad allineare le altezze */
}

/* Permetti sillabazione/andare a capo corretta (serve lang=”fr” in <html>) */
.homepage-variant3-frame181 p,
.homepage-variant3-frame181 span{
  hyphens: auto;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Callout “Built for EU Compliance” – testi centrati e larghezze coerenti */
.homepage-variant3-frame26 .homepage-variant3-text24,
.homepage-variant3-frame27 .homepage-variant3-text28,
.homepage-variant3-frame28 .homepage-variant3-text32{
  text-align: center;
  max-width: 28ch;
  margin-inline: auto;
}

/* Sezione IdMe (foto + testo): 2 colonne desktop, 1 mobile nell’ordine richiesto */
.homepage-variant3-frame24{
 
}
@media (max-width: 960px){
  .homepage-variant3-frame24{ grid-template-columns: 1fr; }
  .homepage-variant3-frame213{ order: 1; } /* immagine */
  .homepage-variant3-frame25{ order: 2; }  /* testo a destra dell’immagine */
}

/* Elenco bullet IdMe: 2 colonne → 1 su mobile */
.homepage-variant3-frame183{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(16px,2vw,28px);
  align-items: start;
}
@media (max-width: 900px){
  .homepage-variant3-frame183{ grid-template-columns: 1fr; }
}

/* Struttura di ogni bullet: icona + testo su 2 colonne */
.homepage-variant3-frame152,
.homepage-variant3-frame162,
.homepage-variant3-frame172,
.homepage-variant3-frame184{
  display: grid !important;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: start;
}
.homepage-variant3-image103,
.homepage-variant3-image104,
.homepage-variant3-image105,
.homepage-variant3-image106{
  width: 44px; height: auto;
}

/* Spaziature un filo più strette per compensare la FR */
.homepage-variant3-frame35,
.homepage-variant3-frame22{
  padding-block: clamp(24px,5vw,64px);
}

/* Header: gestisci spazio e selector lingue */
.homepage-variant3-frame110{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.homepage-variant3-frame31{ display:flex; align-items:center; gap:12px; }

/* Language switch */
.lang-switch{ display:flex; gap:8px; align-items:center; font-size:14px; }
.lang-switch a{ text-decoration:none; font-weight:600; color:#0d2e6f; }
.lang-switch a[aria-current="page"]{ opacity:.55; pointer-events:none; }
@media (max-width:560px){ .lang-switch{ font-size:13px; } }


.row-container {

  display: flex;
  column-gap: 20px;
}