/* ==================================================================
   01. FONT FACE
   ================================================================== */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v48/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuaabVmUiAo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v48/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiAo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v48/KFOKCnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmOClHrs6ljXfMMLoHQuAb-k2Qn.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v48/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjalmUiAo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotocondensed/v31/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyVVpcBO5Xw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/robotocondensed/v30/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyUypcBO5Xw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==================================================================
   02. ROOT TOKENS
   ================================================================== */
/* typography, spacing, layout — colors in blue.css / theme css */

:root{
  /* typography families */
  --font-body-family: 'Roboto', sans-serif;
  --font-heading-family: 'Roboto Condensed', sans-serif;

  /* typography sizes (remain in rem for clamp) */
  --font-size-h1: clamp(1.95rem, 4vw, 2.5rem);   /* 31.2–40px */
  --font-size-h2: clamp(1.75rem, 3.8vw, 1.85rem);/* 28–29.6px */
  --font-size-h3: clamp(1.65rem, 3.6vw, 1.75rem);/* 26.4–28px */
  --font-size-h4: clamp(1.55rem, 3.4vw, 1.65rem);/* 24.8–26.4px */
  --font-size-h5: clamp(1.45rem, 3.2vw, 1.55rem);/* 23.2–24.8px */
  --font-size-h6: clamp(1.35rem, 3vw, 1.45rem);  /* 21.6–23.2px */

  --font-size-p: clamp(1.125rem, 1.5vw, 1.175rem); /* 18–18.8px */
  --font-small-txt: clamp(0.85rem, 1.5vw, 0.95rem);/* 13.6–15.2px */

  /* typography weights */
  --font-body-weight: 300;
  --font-heading-weight: 800;
  --font-button-weight: 700;
  --font-bold-weight: 400;

  /* layout */
  --max-width: 832px;

  /* SPACING SCALE (px) */
  --space-xxs: 4px;   /* micro */
  --space-xs:  8px;   /* tiny */
  --space-sm:  12px;  /* small gaps, captions */
  --space-md:  16px;  /* base vertical rhythm: H→P, P→P, LI→LI */
  --space-lg:  20px;  /* column gaps, side padding */
  --space-xl:  24px;  /* card padding */
  --space-xxl: 30px;  /* section/card bottom spacing */
  --space-xxxl:32px;  /* large footer padding etc. */

  /* gaps (using spacing tokens) */
  --gap-column: var(--space-lg);
  --gap-row:    var(--space-lg);
}

/* ==================================================================
   03. RESET / BASE
   ================================================================== */

*, *::before, *::after{
  padding:0;
  margin:0;
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.unselectable{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

body{
  margin:0;
  padding:0;
  font-family:var(--font-body-family);
  font-weight:var(--font-body-weight);
  background:var(--page-background, var(--color-light-3));
  color:var(--page-text, var(--color-dark-2));
}

img{
  width:100%;
  max-width:450px;
  height:auto;
  display:block;
  border-radius:10px;
  align-self:center;
}

/* ==================================================================
   04. TYPOGRAPHY & LINKS
   ================================================================== */

/* per-heading size + vertical rhythm (top margin varies, bottom ≤ base) */
h1{
  font-size:var(--font-size-h1);
  margin:var(--space-xxl) 0 var(--space-xs);
}
h2{
  font-size:var(--font-size-h2);
  margin:var(--space-xl) 0 var(--space-xs);
}
h3{
  font-size:var(--font-size-h3);
  margin:var(--space-lg) 0 var(--space-xs);
}
h4{
  font-size:var(--font-size-h4);
  margin:var(--space-md) 0 var(--space-xs);
}
h5{
  font-size:var(--font-size-h5);
  margin:var(--space-md) 0 var(--space-xs);
}
h6{
  font-size:var(--font-size-h6);
  margin:var(--space-sm) 0 var(--space-xs);
}

h1, h2, h3, h4, h5, h6{
  font-family:var(--font-heading-family);
  font-weight:var(--font-heading-weight);
  color:var(--heading-text, var(--color-dark-3));
  text-align:center;
}

.heading-left h1,
.heading-left h2,
.heading-left h3,
.heading-left h4,
.heading-left h5,
.heading-left h6{
  text-align:left;
}

.heading-resize h3{
  font-size:var(--font-size-h6);
}

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

sup{
  font-family:var(--font-body-family);
  font-weight:var(--font-body-weight);
  vertical-align:super;
  font-size:smaller;
}

p{
  font-size:var(--font-size-p);
  font-weight:var(--font-body-weight);
  line-height:1.5;
  margin:0 0 var(--space-md) 0;
  align-self:flex-start;
}

/* ----------------------------------------------
   Vertical rhythm: heading → content consistency
   ---------------------------------------------- */

h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p,
h1 + ul,
h2 + ul,
h3 + ul,
h4 + ul,
h5 + ul,
h6 + ul,
h1 + ol,
h2 + ol,
h3 + ol,
h4 + ol,
h5 + ol,
h6 + ol,
h1 + .skin-box,
h2 + .skin-box,
h3 + .skin-box,
h4 + .skin-box,
h5 + .skin-box,
h6 + .skin-box,
h1 + .green-box,
h2 + .green-box,
h3 + .green-box,
h4 + .green-box,
h5 + .green-box,
h6 + .green-box,
h1 + .yellow-box,
h2 + .yellow-box,
h3 + .yellow-box,
h4 + .yellow-box,
h5 + .yellow-box,
h6 + .yellow-box,
h1 + .purple-box,
h2 + .purple-box,
h3 + .purple-box,
h4 + .purple-box,
h5 + .purple-box,
h6 + .purple-box,
h1 + .red-box,
h2 + .red-box,
h3 + .red-box,
h4 + .red-box,
h5 + .red-box,
h6 + .red-box,
h1 + .gray-box,
h2 + .gray-box,
h3 + .gray-box,
h4 + .gray-box,
h5 + .gray-box,
h6 + .gray-box,
h1 + .advantages-list,
h2 + .advantages-list,
h3 + .advantages-list,
h4 + .advantages-list,
h5 + .advantages-list,
h6 + .advantages-list{
  margin-top:var(--space-md);
}

p + ul,
p + ol{
  margin-top:var(--space-md);
}

p a,
label a,
li a{
  color:var(--link-color, var(--color-primary));
  font-weight:var(--font-bold-weight);
  text-decoration:none;
}
p a:hover,
label a:hover,
li a:hover{
  color:var(--link-color-hover, var(--color-primary-dark));
}

strong{
  font-weight:var(--font-bold-weight);
}

.centered{
  align-self:center;
}

/* ==================================================================
   05. LAYOUT CONTAINERS & SECTIONS
   ================================================================== */

.container{
  max-width:var(--max-width);
  margin:var(--space-lg) auto;
  padding:0;
  background:var(--surface-1, var(--color-light-1));
  border:10px solid var(--surface-2, var(--color-light-2));
  border-radius:32px;
  overflow:hidden;
}

.section{
  display:flex;
  flex-wrap:wrap;
  margin-bottom:0;
  background-color:var(--surface-1, var(--color-light-1));
  column-gap:var(--gap-column);
  row-gap:var(--gap-row);
  padding:0 var(--space-lg) var(--space-xxl) var(--space-lg);
}

/* overrides parent padding to achieve a full-bleed background */
.section-bleed{
  margin-left:calc(-1 * var(--space-lg));
  margin-right:calc(-1 * var(--space-lg));
  flex:0 0 calc(100% + (2 * var(--space-lg))); /* full row inside .section */
}

/* stop double spacing at the end of columns */
.section .col > :last-child{
  margin-bottom:0;
}

/* main background image (#hero, #offer) */
.background {
  background-color:var(--background-dark, var(--color-dark-3));
  background-size:contain;
  background-position:top center;
  background-repeat:repeat-y;
}

.background-light{
  background-color:var(--surface-2, var(--color-light-2));
}
.background-dark{
  background-color:var(--background-dark, var(--color-dark-3));
}
.background-dark h1,
.background-dark h2{
  color:var(--background-dark-heading, var(--color-light-1));
}

.section-title{
  width:100%;
  margin-bottom:var(--space-md);
}

.underline{
  padding:0 0 var(--space-sm) 0;
  border-bottom:5px solid var(--surface-3, var(--color-light-3));
}

#offer .skin-box{
  margin-bottom:0;
}

/* ==================================================================
   06. GRID (COLUMNS & HELPERS)
   ================================================================== */

.col{
  flex:1 1 100%;
  max-width:100%;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.col figure{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:0;
}

/* generic figure captions (product/steps/ingredients) */
section figure figcaption{
  text-align:center;
  font-family:var(--font-heading-family);
  font-size:var(--font-size-p);
  font-weight:var(--font-button-weight);
  line-height:1.4;
  color:var(--page-text, var(--color-dark-2));
  margin-top:var(--space-md);
  margin-bottom:var(--space-sm);
}

/* usage steps: paragraph inside figure behaves like body copy, normalized */
#usage .col figure p{
  align-self:stretch;
  width:100%;
  text-align:left;
  margin:var(--space-md) 0 0;
}

/* utility to align column content to the top */
.col-start{
  justify-content:flex-start !important;
}

.one-col  .col{ flex:0 0 100%; }
.two-col  .col{ flex:0 0 calc((100% - var(--gap-column)) / 2); }
.three-col .col{ flex:0 0 calc((100% - (2 * var(--gap-column))) / 3); }
.four-col .col{ flex:0 0 calc((100% - (3 * var(--gap-column))) / 4); }

/* two-column wrapper that can flip on mobile */
.pair{
  display:flex;
  flex-wrap:wrap;
  max-width:100%;
  gap:var(--gap-column);
}
.pair .col{
  flex:0 0 calc((100% - var(--gap-column)) / 2);
}

/* force an item to span the full width of the flex container */
.full-width{
  flex:0 0 100% !important;
  width:100% !important;
  max-width:100% !important;
}

/* style for disclaimers */
.disclaimer-box{
  margin-top:var(--space-md);
  padding-top:var(--space-sm);
  border-top:1px solid var(--border-subtle, var(--color-light-3));
  color:var(--border-strong, var(--color-dark-1));
}
.disclaimer-box .small-text{
  margin:0;
}

/* ==================================================================
   07. UTILITIES & EFFECTS
   ================================================================== */

.image-highlight{
  transition:transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  filter:none;
}
.image-highlight:hover{
  transform:translateY(-4px);
  filter:brightness(1.025) saturate(1.025) contrast(1.025);
}

.solid-shadow{
  filter:none;
  background-color:var(--surface-3, var(--color-light-3));
  box-shadow:5px 5px var(--surface-3, var(--color-light-3));
  border:1px solid var(--surface-3, var(--color-light-3));
}
.solid-shadow:hover{
  filter:brightness(1.025) saturate(1.025) contrast(1.025);
}

.crossout {
  position:relative;
}
.crossout:before {
  position:absolute;
  content:"";
  left:0;
  top:50%;
  right:0;
  border-top:1.4px solid;
  border-color:inherit;
  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}

/* ==================================================================
   08. ACCORDION
   ================================================================== */

.accordion{
  width:100%;
  margin:0 0 var(--space-sm) 0;
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
}

/* base details card (now with shadow like FAQ) */
.accordion details{
  background:var(--accordion-card-background, var(--color-light-1));
  border:1px solid var(--accordion-card-border, var(--color-light-3));
  border-radius:10px;
  overflow:hidden;
  box-shadow:5px 5px var(--accordion-card-shadow, var(--color-light-3));
  transition:background-color 0.3s ease, border-color 0.3s ease;
}

/* summary header – unified style */
.accordion summary{
  background:var(--accordion-summary-background, var(--color-dark-1));
  color:var(--accordion-summary-text, var(--color-light-1));
  padding:var(--space-md) 48px var(--space-md) 24px;
  font-family:var(--font-heading-family);
  font-size:var(--font-size-p);
  font-weight:var(--font-button-weight);
  line-height:1;
  text-transform:none;
  cursor:pointer;
  transition:background 0.35s ease-in-out;
  position:relative;
  list-style:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  outline:none;
}

.accordion summary:focus-visible{
  outline:2px dashed var(--focus-outline-color, var(--link-color-hover, var(--color-primary-dark)));
  outline-offset:4px;
}

.accordion summary::-webkit-details-marker,
.accordion summary::marker{
  content:"" !important;
}

/* chevron icon */
.accordion summary::after{
  content:"";
  position:absolute;
  top:50%;
  right:20px;
  width:10px;
  height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
  transition:transform 0.35s ease;
}

.accordion details[open] > summary::after{
  transform:translateY(-50%) rotate(225deg);
}

.accordion summary:hover,
.accordion details[open] summary{
  background:var(--accordion-summary-background-hover, var(--color-dark-2));
}

/* smooth content panel */
.accordion .accordion-content{
  padding:var(--space-md) var(--space-lg) var(--space-lg);
  max-height:0;
  opacity:0;
  transform:translateY(-4px);
  overflow:hidden;
  transition:
    max-height 0.35s ease,
    opacity    0.35s ease,
    transform  0.35s ease;
}

/* base: no outer margin on paragraphs */
.accordion .accordion-content p{
  margin:0;
}

/* spacing between paragraphs inside accordion answers */
.accordion .accordion-content p + p{
  margin-top:var(--space-md);
}

/* open state driven by native [open] */
.accordion details[open] .accordion-content{
  max-height:800px;
  opacity:1;
  transform:translateY(0);
}

/* ==================================================================
   09. LISTS — OFFER VIGNETTES
   ================================================================== */

ul.offer-vignettes{
  align-self:flex-start;
  width:100%;
  list-style:none;
  padding:0;
}

/* offer vignettes shared properties */
ul.offer-vignettes li.checkmark-small,
ul.offer-vignettes li.crossmark-small,
ul.offer-vignettes li.dot-hollow-small,
ul.offer-vignettes li.square-four-small,
ul.offer-vignettes li.square-hollow-small,
ul.offer-vignettes li.dash-small{
  display:block;
  font-size:var(--font-size-p);
  font-weight:var(--font-body-weight);
  background-repeat:no-repeat;
  background-position:0% 15%;
  background-size:25px 25px;
  padding-left:32px;
  margin-bottom:var(--space-md);
}

/* light surfaces: only the icon changes */
ul.offer-vignettes li.checkmark-small     { background-image:url("/assets/img/skin/checkmark.svg"); }
ul.offer-vignettes li.crossmark-small     { background-image:url("/assets/img/skin/crossmark.svg"); }
ul.offer-vignettes li.dot-hollow-small    { background-image:url("/assets/img/skin/dot-hollow.svg"); }
ul.offer-vignettes li.square-four-small   { background-image:url("/assets/img/skin/square-four.svg"); }
ul.offer-vignettes li.square-hollow-small { background-image:url("/assets/img/skin/square-hollow.svg"); }
ul.offer-vignettes li.dash-small          { background-image:url("/assets/img/skin/dash.svg"); }

/* ==================================================================
   10. CALLOUT BOXES
   ================================================================== */

.skin-box,
.green-box,
.yellow-box,
.purple-box,
.red-box,
.gray-box{
  padding:10px 20px;
  margin:0 0 var(--space-xxl) 0;
  border-left:5px solid transparent;
  border-radius:10px;
  overflow:hidden;
}

.skin-box  { background-color:var(--surface-2, var(--color-light-2));  border-left-color:var(--accent-color, var(--color-primary)); }
.green-box { background-color:var(--green-box);      border-left-color:var(--green-box-border); }
.yellow-box{ background-color:var(--yellow-box);     border-left-color:var(--yellow-box-border); }
.purple-box{ background-color:var(--purple-box);     border-left-color:var(--purple-box-border); }
.red-box   { background-color:var(--red-box);        border-left-color:var(--red-box-border); }
.gray-box  { background-color:var(--gray-box);       border-left-color:var(--gray-box-border); }

.skin-box p,
.green-box p,
.yellow-box p,
.purple-box p,
.red-box p,
.gray-box p{
  margin:0;
}

/* spacing between paragraphs inside callout boxes */
.skin-box p + p,
.green-box p + p,
.yellow-box p + p,
.purple-box p + p,
.red-box p + p,
.gray-box p + p{
  margin-top:var(--space-md);
}

/* ==================================================================
   11. ADVANTAGES BLOCK
   ================================================================== */

.advantages-list{
  list-style:none;
  padding:0;
  margin:0;
}

.advantage-item{
  margin:0 0 var(--space-xl) 0;
  padding-bottom:var(--space-lg);
  border-bottom:1px solid var(--border-subtle, var(--color-light-3));
}

.advantage-item:last-child{
  border-bottom:none;
  padding-bottom:0;
}

/* title strip with icon before text */
.advantage-title{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 15px;
  border-radius:10px;
  background-color:var(--surface-1, var(--color-light-1));
  border:1px solid var(--border-subtle, var(--color-light-3));
  box-shadow:5px 5px var(--surface-3, var(--color-light-3));
  font-family:var(--font-heading-family);
  font-weight:var(--font-button-weight);
  font-size:var(--font-size-p);
  line-height:1.4;
  color:var(--heading-text, var(--color-dark-3));
}

/* icon: same size as offer vignettes bullets */
.advantage-title::before{
  content:"";
  flex-shrink:0;
  width:25px;
  height:25px;
  background-image:url("/assets/img/skin/checkmark.svg");
  background-repeat:no-repeat;
  background-position:center;
  background-size:25px 25px;
}

/* paragraph explaining the title */
.advantage-body{
  margin:var(--space-sm) 0 0;
}

/* ==================================================================
   12. TESTIMONIALS AND CARDS
   ================================================================== */

.testimonial-text{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:var(--space-lg) var(--space-sm);
  position:relative;
}

.testimonial-title{
  font-weight:var(--font-heading-weight);
  font-size:var(--font-size-h2);
  line-height:1.3;
  color:var(--accent-strong, var(--link-color-hover, var(--color-primary-dark)));
  margin:0 0 var(--space-sm) 0;
}

.testimonial-card,
.promo-card{
  background:var(--surface-1, var(--color-light-1));
  border:1px solid var(--border-subtle, var(--color-light-3));
  border-radius:10px;
  padding:var(--space-xl) var(--space-lg);
  margin:0 0 var(--space-xxl) 0;
  box-shadow:5px 5px var(--surface-3, var(--color-light-3));
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--space-md);
  transition:transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.testimonial-card:hover,
.promo-card:hover{
  transform:translateY(-4px);
  filter:brightness(1.025) saturate(1.025) contrast(1.025);
}

.testimonial-card-avatar{
  width:128px;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:10px;
  border:4px solid var(--surface-1, var(--color-light-1));
  box-shadow:0 0 0 4px var(--surface-3, var(--color-light-3));
}

/* avatar in 2-column layout */
.avatar-large{
  width:97%;
}

.testimonial-card-quote{
  font-size:var(--font-size-h5);
  font-family:var(--font-heading-family);
  font-weight:var(--font-heading-weight);
  color:var(--accent-strong, var(--link-color-hover, var(--color-primary-dark)));
  margin:0;
  line-height:1.35;
}

.testimonial-card-name,
.testimonial-author{
  font-size:var(--font-size-p);
  font-style:italic;
  font-weight:var(--font-bold-weight);
  color:var(--border-strong, var(--color-dark-1));
  margin:0;
  align-self:center;
}

/* paragraph inside testimonial cards */
.testimonial-card > p{
  font-size:var(--font-size-p);
  line-height:1.5;
  text-align:left;
  align-self:stretch;
  margin:0;
}

/* ==================================================================
   13. COUNTRY CARD — FIXED & ENHANCED
   ================================================================== */

/* base card layout works for div or anchor */
.country-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  padding:0;
}

/* link reset + colors for anchor version */
:is(a).country-card{
  text-decoration:none;
  color:var(--page-text, var(--color-dark-2));
}
:is(a).country-card:visited{
  color:var(--page-text, var(--color-dark-2));
}

/* country label (uses body paragraph scale) */
.country-card :is(p, figcaption){
  align-self:center;
  width:100%;
  margin:var(--space-sm) var(--space-lg) 0 var(--space-lg);
  text-align:center;
  font-size:var(--font-size-p);
  line-height:1.5;
  font-weight:var(--font-button-weight);
  font-family:var(--font-heading-family);
  text-decoration:none;
  color:var(--page-text, var(--color-dark-2));
  transition:color 0.2s ease, transform 0.2s ease;
}

/* text emphasis on hover/focus of the whole card */
:is(a).country-card:hover :is(p, figcaption),
:is(a).country-card:focus-visible :is(p, figcaption){
  color:var(--link-color-hover, var(--color-primary-dark));
  font-weight:var(--font-button-weight);
  transform:translateY(-4px);
}

/* reset figure defaults for layout parity */
.country-card figure{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
}

:is(a).country-card:hover .image-highlight,
:is(a).country-card:focus-visible .image-highlight{
  transform:translateY(-4px);
  filter:brightness(1.025) saturate(1.025) contrast(1.025);
}

/* accessible focus ring for keyboard users */
:is(a).country-card:focus-visible{
  outline:2px dashed var(--border-strong, var(--color-dark-1));
  outline-offset:4px;
  border-radius:12px;
}

/* ==================================================================
   14. FORMS & BUTTONS
   ================================================================== */

.form-row{
  display:block;
  margin:0 0 var(--space-md) 0;
}

/* layout only */
label,
input,
select{
  display:block;
}

/* typography */
label,
input,
select,
option{
  font-family:var(--font-body-family);
}

label{
  font-weight:var(--font-body-weight);
  margin:0 0 var(--space-xs) 0;
}

/* base dimensions */
input,
select{
  width:100%;
  height:48px;
  max-width:450px;
  margin:0 auto;
}

/* base visuals (states centralized in 15.1) */
input[type=text],
input[type=tel],
input[type=email],
textarea,
select{
  font-size:var(--font-size-p);
  font-weight:var(--font-bold-weight);
  color:var(--field-text, var(--color-dark-3));
  padding:0 16px 0 32px;
  border:1px solid var(--field-border, var(--color-light-3));
  border-radius:10px;
  background-color:var(--field-background, var(--color-light-2));
  transition:border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* textarea visual parity and spacing */
textarea{
  width:100%;
  height:150px;
  font-size:var(--font-size-p);
  font-weight:var(--font-bold-weight);
  color:var(--field-text, var(--color-dark-3));
  padding:14px 16px 14px 32px;
  border:1px solid var(--field-border, var(--color-light-3));
  border-radius:10px;
  background-color:var(--field-background, var(--color-light-2));
  line-height:1.45;
  resize:none;
}

/* custom select arrow (palette-driven, no native ui) */
select{
  -webkit-appearance:none;
  appearance:none;
  padding-right:36px;
  background-color:var(--field-background, var(--color-light-2));
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'>\
  <polyline points='2,2 8,8 14,2' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px 10px;
}

/* micro-interaction for arrow shift */
select:hover{
  background-position:right 13.6px center;
}
select:focus{
  background-position:right 12.8px center;
}

/* custom themed checkbox (css-drawn checkmark) */
.form-row input[type="checkbox"]{
  -webkit-appearance:none;
  appearance:none;
  display:inline-grid;
  place-content:center;
  width:20px;
  height:20px;
  margin:0 9.6px 0 0;
  vertical-align:text-bottom;
  cursor:pointer;
  border:1px solid var(--field-border, var(--color-light-3));
  border-radius:4px;
  background-color:var(--field-background, var(--color-light-2));
  transition:background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* right-leaning checkmark */
.form-row input[type="checkbox"]::before{
  content:"";
  width:8.8px;
  height:5.6px;
  border-left:2px solid var(--checkbox-check, var(--accent-color, var(--color-primary)));
  border-bottom:2px solid var(--checkbox-check, var(--accent-color, var(--color-primary)));
  transform:translateY(-5%) rotate(-45deg) scale(0);
  transform-origin:center;
  transition:transform 0.2s ease;
}

.form-row input[type="checkbox"]:checked{
  border-color:var(--field-border-focus, var(--color-primary));
  background-color:var(--field-background-focus, var(--color-light-1));
  box-shadow:0 0 0 2px var(--field-focus-ring, var(--color-shadow-2));
}

.form-row input[type="checkbox"]:checked::before{
  transform:translateY(-5%) rotate(-45deg) scale(1);
}

.form-row input[type="checkbox"]:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--field-focus-ring, var(--color-shadow-2));
  border-color:var(--field-border-focus, var(--color-primary));
}

/* keep checkbox text inline and clickable */
.form-row input[type="checkbox"] + label{
  display:inline;
  margin:0;
  line-height:1.45;
  font-size:var(--font-small-txt);
  cursor:pointer;
}

.form-row input[type="checkbox"] + label a{
  text-decoration:none;
  font-weight:var(--font-bold-weight);
}

/* unified placeholder styling */
input::placeholder,
textarea::placeholder{
  color:var(--field-placeholder, var(--color-dark-3));
  opacity:1;
  font-size:var(--font-size-p);
  font-weight:var(--font-bold-weight);
  font-family:var(--font-body-family);
}

/* visibility helpers and errors */
.form-hidden{
  display:none;
}

/* visually hidden but accessible */
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.form-error{
  color:var(--red-alert);
  font-weight:var(--font-body-weight);
  font-size:var(--font-small-txt);
  padding:0 0 0 32px;
  margin-top:var(--space-xs);
}

.offer-dark .form-error{
  color:var(--yellow-alert);
}

/* buttons */
button{
  font-family:var(--font-body-family);
  display:block;
  width:100%;
  height:48px;
  font-size:var(--font-size-p);
  font-weight:var(--font-button-weight);
  margin:0 auto;
  cursor:pointer;
  border-radius:10px;
  text-transform:uppercase;
}

.button-gradient{
  color:var(--button-text, var(--color-light-1));
  background-color:var(--button-background, var(--color-primary));
  border:1px solid var(--button-border, var(--color-light-3));
}

.button-gradient:hover{
  color:var(--button-text-hover, var(--button-text, var(--color-light-1)));
  background-color:var(--button-background-hover, var(--color-primary-dark));
  border-color:var(--button-border-hover, var(--button-border, var(--color-light-3)));
}

.button-gradient:active{
  color:var(--button-text-active, var(--button-text-hover, var(--button-text, var(--color-light-1))));
  background-color:var(--button-background-active, var(--button-background-hover, var(--color-primary-dark)));
  border-color:var(--button-border-active, var(--button-border-hover, var(--button-border, var(--color-light-3))));
}

/* buttons: keyboard focus */
button:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--button-focus-ring, var(--color-shadow-2));
  border-color:var(--button-border-focus, var(--field-border-focus, var(--color-primary)));
}

/* submission feedback */
#response{
  display:none;
  text-align:center;
}

#response img{
  width:100px;
  height:100px;
  margin:var(--space-md) auto var(--space-md) auto;
}

p#responseMessage{
  text-align:center;
  margin:20px 0 20px 0;
}

/* ==================================================================
   14.1 KEY VALUES (THANK-YOU PAGE)
   ================================================================== */

.data-review{
  margin-bottom:var(--space-xxl);
}

.data-review .form-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:450px;
  margin:0 auto var(--space-md) auto;
  height:48px;
  font-size:var(--font-size-p);
  font-weight:var(--font-bold-weight);
  color:var(--field-text, var(--color-dark-3));
  border:1px solid var(--field-border, var(--color-light-3));
  border-radius:10px;
  background-color:var(--field-background, var(--color-light-2));
  padding:0 16px 0 32px;
  opacity:.85;
}

.data-review .form-row:last-child{
  margin-bottom:0;
}

.data-review dt{
  font-weight:var(--font-bold-weight);
  margin:0;
  padding-right:16px;
  flex-shrink:0;
  text-align:left;
}

.data-review dd{
  margin:0;
  text-align:right;
  font-weight:var(--font-bold-weight);
  flex-grow:1;
}

/* ==================================================================
   15. OFFER PANELS
   ================================================================== */

/* shared panel container */
.offer-light,
.offer-dark{
  padding:var(--space-xl);
  margin:0;
  border-radius:10px;
}

/* light panel (on light surfaces) */
.offer-light{
  position:relative;
  background-color:var(--panel-light-background, var(--surface-1, var(--color-light-1)));
  background:hsl(from var(--panel-light-background, var(--surface-1, var(--color-light-1))) h s l / 0.8);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

/* light panel text/colors */
.offer-light h3{
  color:var(--panel-light-text, var(--heading-text, var(--color-dark-3)));
}

/* normalize card title inside panels: remove extra top margin */
.offer-light h3,
.offer-dark h3{
  margin-top:0;
  margin-bottom:var(--space-md);
}

.offer-light .offer-vignettes{
  color:var(--panel-light-text, var(--heading-text, var(--color-dark-3)));
}

/* light panel inputs: base */
.offer-light input[type=text],
.offer-light input[type=tel],
.offer-light input[type=email],
.offer-light textarea,
.offer-light select,
.offer-light option{
  color:var(--field-text, var(--color-dark-3));
  border:1px solid var(--field-border, var(--color-light-3));
  background-color:var(--field-background, var(--color-light-2));
}

/* light panel buttons */
.offer-light .button-gradient{
  border:1px solid var(--button-border, var(--color-light-3));
}

/* dark panel (on dark surfaces) */
.offer-dark{
  position:relative;
  background-color:var(--panel-dark-background, var(--background-dark, var(--color-dark-3)));
  background:hsl(from var(--panel-dark-background, var(--background-dark, var(--color-dark-3))) h s l / 0.8);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

/* dark panel text/colors */
.offer-dark h3{
  color:var(--panel-dark-text, var(--background-dark-heading, var(--color-light-1)));
}
.offer-dark .offer-vignettes{
  color:var(--panel-dark-text, var(--background-dark-heading, var(--color-light-1)));
}

/* dark panel inputs: base */
.offer-dark input[type=text],
.offer-dark input[type=tel],
.offer-dark input[type=email],
.offer-dark textarea,
.offer-dark select,
.offer-dark option{
  color:var(--field-dark-text, var(--color-dark-3));
  border:1px solid var(--field-dark-border, var(--color-dark-1));
  background-color:var(--field-dark-background, var(--color-light-1));
}

/* dark panel icons (white variants) */
.offer-dark .offer-vignettes li.checkmark-small     { background-image:url("/assets/img/skin/checkmark-white.svg"); }
.offer-dark .offer-vignettes li.dot-hollow-small    { background-image:url("/assets/img/skin/dot-hollow-white.svg"); }
.offer-dark .offer-vignettes li.square-four-small   { background-image:url("/assets/img/skin/square-four-white.svg"); }
.offer-dark .offer-vignettes li.square-hollow-small { background-image:url("/assets/img/skin/square-hollow-white.svg"); }
.offer-dark .offer-vignettes li.dash-small          { background-image:url("/assets/img/skin/dash-white.svg"); }

.offer-dark .button-gradient{
  border:1px solid var(--button-dark-border, var(--color-dark-1));
}

/* ==================================================================
   15.1 GLOBAL FIELD STATES
   ================================================================== */

:is(.offer-light, .offer-dark, body) input[type="text"],
:is(.offer-light, .offer-dark, body) input[type="tel"],
:is(.offer-light, .offer-dark, body) input[type="email"],
:is(.offer-light, .offer-dark, body) textarea,
:is(.offer-light, .offer-dark, body) select{
  outline:none;
  transition:border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* hover: consistent everywhere */
:is(.offer-light, .offer-dark, body) input[type="text"]:hover,
:is(.offer-light, .offer-dark, body) input[type="tel"]:hover,
:is(.offer-light, .offer-dark, body) input[type="email"]:hover,
:is(.offer-light, .offer-dark, body) textarea:hover,
:is(.offer-light, .offer-dark, body) select:hover{
  border-color:var(--field-border-hover, var(--color-primary-dark));
}

/* focus (mouse or programmatic) */
:is(.offer-light, .offer-dark, body) input[type="text"]:focus,
:is(.offer-light, .offer-dark, body) input[type="tel"]:focus,
:is(.offer-light, .offer-dark, body) input[type="email"]:focus,
:is(.offer-light, .offer-dark, body) textarea:focus,
:is(.offer-light, .offer-dark, body) select:focus{
  border-color:var(--field-border-focus, var(--color-primary));
  box-shadow:0 0 0 2px var(--field-focus-ring, var(--color-shadow-2));
  background-color:var(--field-background-focus, var(--color-light-1));
}

/* keyboard focus clarity (tabbing) */
:is(.offer-light, .offer-dark, body) input[type="text"]:focus-visible,
:is(.offer-light, .offer-dark, body) input[type="tel"]:focus-visible,
:is(.offer-light, .offer-dark, body) input[type="email"]:focus-visible,
:is(.offer-light, .offer-dark, body) textarea:focus-visible,
:is(.offer-light, .offer-dark, body) select:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--field-focus-ring, var(--color-shadow-2));
  border-color:var(--field-border-focus, var(--color-primary));
}

/* disabled state consistency */
:is(.offer-light, .offer-dark, body) input:disabled,
:is(.offer-light, .offer-dark, body) select:disabled,
:is(.offer-light, .offer-dark, body) textarea:disabled{
  opacity:.7;
  cursor:not-allowed;
  box-shadow:none;
}

/* ==================================================================
   15.2 SELECT STYLING
   ================================================================== */

select option{
  color:var(--field-text, var(--color-dark-3));
  background-color:var(--field-background-focus, var(--color-light-1));
  line-height:1.4;
}

select option:checked{
  background-color:var(--surface-3, var(--color-light-3));
  color:var(--field-text, var(--color-dark-3));
}

select option:hover{
  background-color:var(--surface-3, var(--color-light-3));
}

select optgroup{
  color:var(--field-text, var(--color-dark-3));
  font-weight:var(--font-bold-weight);
  background:var(--field-background, var(--color-light-2));
}

select option[disabled]{
  color:var(--field-text, var(--color-dark-3));
}

/* remove native appearances on form controls (single consolidated rule) */
input,
select,
textarea,
button{
  -webkit-appearance:none;
  appearance:none;
}

/* ==================================================================
   16. NAVIGATION
   ================================================================== */

.nav{
  display:flex;
  width:100%;
  margin:var(--space-xxl) 0 0 0;
  background:var(--nav-background, var(--color-light-1));
  border-top:1px solid var(--nav-border-top, var(--color-light-3));
  border-bottom:1px solid var(--nav-border-bottom, var(--color-dark-1));
}

.nav-link{
  flex:1 1 50%;
  text-align:center;
  padding:var(--space-md) 0;
  font-size:var(--font-size-p);
  font-family:var(--font-body-family);
  font-weight:var(--font-button-weight);
  color:var(--nav-link-color, var(--color-dark-2));
  text-decoration:none;
  box-sizing:border-box;
  border-right:1px solid var(--nav-link-divider, var(--nav-border-top, var(--color-light-3)));
  transition:background 0.2s ease, color 0.2s ease;
  text-transform:uppercase;
}

.nav-link:last-child{
  border-right:none;
}

.nav-link:hover{
  background:var(--nav-link-hover-background, var(--color-light-3));
}

.nav-link.active{
  background:var(--nav-link-active-background, var(--color-dark-2));
  color:var(--nav-link-active-color, var(--color-light-1));
}

/* ==================================================================
   17. FOOTER
   ================================================================== */

.footer{
  text-align:center;
  padding:var(--space-xxxl) var(--space-md);
  font-size:var(--font-size-p);
  color:var(--footer-text, var(--color-light-3));
  background:var(--footer-background, var(--color-dark-1));
}

.footer-text{
  font-size:var(--font-size-p);
  font-weight:var(--font-body-weight);
  text-align:center;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px 16px;
  margin:var(--space-md) 0 var(--space-md) 0;
  list-style:none;
}

.footer-links a{
  color:var(--footer-link-color, var(--color-light-3));
  text-decoration:none;
  white-space:nowrap;
  transition:color 0.2s;
  font-weight:var(--font-body-weight);
  display:inline-flex;
  align-items:center;
}

/* apply custom svg icon to all footer links */
.footer-links a::before{
  content:"";
  width:15px;
  height:15px;
  margin: 3px 3px 0 0;
  /*margin-right:6px;*/
  background-image:url("/assets/img/skin/square-four-white.svg");
  background-size:100% 100%;
  background-repeat:no-repeat;
  flex-shrink:0;
}

.footer-links a:hover{
  color:var(--footer-link-hover-color, var(--color-light-2));
}

.small-text{
  font-size:var(--font-small-txt);
  font-weight:var(--font-body-weight);
  text-align:center;
}

footer p.small-text{
  color:var(--heading-text, var(--color-dark-3));
  margin:0;
}
/* ==================================================================
   18. BOTTOM BAR
   ================================================================== */
#fixed-bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: none;
}

#fixed-bottom-bar button {
	max-width: 832px !important;
	border-radius: 0;
	border-left: none;
	border-right: none;
	border-bottom: none;
	box-shadow: none;
}

/* ==================================================================
   19. MEDIA QUERIES
   ================================================================== */

/* tablet (481px–768px) */
@media (max-width:768px){
  .testimonial-card-avatar.avatar-large{
    width:97%;
  }

  .two-col  .col{ flex:0 0 calc((100% - var(--gap-column)) / 2); }
  .three-col .col{ flex:0 0 calc((100% - var(--gap-column)) / 2); }
  .four-col .col{ flex:0 0 calc((100% - (2 * var(--gap-column))) / 3); }

  .testimonial-card{
    padding:var(--space-lg);
  }

  .testimonial-card-avatar{
    width:104px;
  }
}

/* mobile (≤480px) */
@media (max-width:480px){
  /* advantages block refinements */
  .advantage-item{
    margin-bottom:20px;
  }
  .advantage-title{
    padding:9px 14px;
  }

  .testimonial-card-avatar.avatar-large{
    width:97%;
  }

  .two-col .col,
  .three-col .col{
    flex:0 0 100%;
  }

  .four-col .col{
    flex:0 0 calc((100% - var(--gap-column)) / 2);
  }

  .background {
    background-color:var(--background-dark, var(--color-dark-3));
    background-size:contain;
    background-position:top center;
    background-repeat:repeat-y;
  }

  .flip-mobile .mobile-first{
    order:-1;
  }
  .flip-mobile .col{
    flex:0 0 100%;
  }

  .green-box { border-top:5px solid var(--green-box-border);  border-left-width:0; }
  .yellow-box{ border-top:5px solid var(--yellow-box-border); border-left-width:0; }
  .red-box   { border-top:5px solid var(--red-box-border);    border-left-width:0; }
  .purple-box{ border-top:5px solid var(--purple-box-border); border-left-width:0; }
  .gray-box  { border-top:5px solid var(--gray-box-border);   border-left-width:0; }

  .testimonial-text{
    padding:16px 9.6px;
  }
  .testimonial-text::after{
    content:"";
    position:absolute;
    left:0;
    top:15%;
    height:70%;
    width:4px;
    background:var(--accent-strong, var(--link-color-hover, var(--color-primary-dark)));
    border-radius:2px;
  }

  .container{
    margin:0 auto;
    border:none;
    border-radius:0;
  }

  .nav{
    flex-direction:column;
  }
  .nav-link{
    border-right:none;
    border-bottom:1px solid var(--nav-border-top, var(--color-light-3));
  }
  .nav-link:last-child{
    border-bottom:none;
  }
}