/* VARIABLES */
:root {
  /* Colors */
  --color-primary: #139182;
  --color-secondary: #A44A3F;
  --color-aqua: #79E5D8;
  --color-coral: #F19C79;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-green: #1E3D3A;
  --color-lime: #D4E09B;
  --color-darkg: #0F2220;
  --color-darkl: #0E7165;
  --color-gray: #939393;
  --color-blue: #006073;
  --color-cream: #F6F4D2;
  --color-fnave: rgba(19, 145, 130, 0.14);
  --gradiand-menu: linear-gradient(180deg,#112120 0%, #11AE9F 100%);
  --gradiand-hero: linear-gradient(180deg, #050908 0%, rgba(5, 9, 8, 0) 100%);
  --gradient-cover: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 78%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 100%);
  --gradient-cover2: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 51%, rgba(0, 0, 0, 0) 100%);
  
  
  /* Fonts Size */
	--font-sm: clamp(0.5rem, 3vw, 0.75rem);
	--font-md: clamp(0.8rem, 3vw, 1.125rem);
	--font-lg: clamp(1.3rem, 2vw, 2rem);
	--font-xl: clamp(1.6rem, 2vw, 3.125rem);
	--font-2xl: clamp(3.75rem, 5vw, 5.5rem);
	--font-3xl: clamp(2.75rem, 5vw, 6.125rem);

  /* Paddings & Margins */
  --space-xxs: clamp(4px, 3vw, 5px);
  --space-xs: clamp(8px, 3vw, 10px);
  --space-sm: clamp(11px, 3vw, 15px);
  --space-md: clamp(14px, 3vw, 20px);
  --space-lg: clamp(18px, 3vw, 25px);
  --space-xl: clamp(21px, 3vw, 30px);
  --space-1xl: clamp(28px, 3vw, 40px);
  --space-2xl: clamp(35px, 3vw, 50px);
  --space-3xl: clamp(49px, 3vw, 70px);
  --space-4xl: clamp(56px, 3vw, 80px);
  --space-5xl: clamp(70px, 3vw, 100px);
  --space-6xl: clamp(126px, 3vw, 180px);
  --space-cont: 1400px;
  --padding: min(5vw, 70px);
  /* Borde Radius */
  --radius-pill: 100vmax; /* ya lo tienes */
  --radius-xl: 20px;     /* cards / contenedores */
  --radius-lg: 14px;      /* chat */
  --radius-md: 11px;      /* bubble grande, .chat .msn */
  --radius-sm: 6px;       /* bubble chica */
  /* Utilities */
  --max-bg-deco: 500px;
  --chat-w: 300px;
  --parr-max: 620px;
  --card-mh: 592px;
}

@media (color-gamut: p3) {
  :root {
	--color-primary:   color(display-p3 0.074510 0.568627 0.509804);      
	--color-secondary: color(display-p3 0.643137 0.290196 0.247059);    
	--color-coral:     color(display-p3 0.945098 0.611765 0.474510);         
	--color-aqua:      color(display-p3 0.474510 0.898039 0.847059);        
    --color-lime:      color(display-p3 0.831373 0.878431 0.607843);        
	--color-green:     color(display-p3 0.117647 0.239216 0.227451);     
	--color-white:     color(display-p3 1.000000 1.000000 1.000000);                   
	--color-black:     color(display-p3 0.000000 0.000000 0.000000);  
    --color-gray:      color(display-p3 0.576471 0.576471 0.576471);
    --color-blue:      color(display-p3 0.000000 0.376471 0.450980);
    --color-cream:     color(display-p3 0.964706 0.956863 0.823529);     
    --color-darkg:     color(display-p3 0.058824 0.133333 0.125490);
    --color-darkl:     color(display-p3 0.054902 0.443137 0.396078);
    --color-fnave:   color(display-p3 0.074510 0.568627 0.509804 / 0.14);    
    --gradiand-menu: linear-gradient(180deg,color(display-p3 0.066667 0.129412 0.125490) 0%, color(display-p3 0.066667 0.682353 0.623529) 100%);
    --gradiand-hero: linear-gradient(180deg,color(display-p3 0.019608 0.035294 0.031373) 0%, color(display-p3 0.019608 0.035294 0.031373 / 0) 100%);
  }
}


/* BASE */
html, body { overflow-x: clip;  }
html{
	margin:0;
	padding:0;
	scroll-behavior: smooth;
	font-size:16px;
}
body {
  font-family: 'Outfit', sans-serif;
  font-size: var(--font-lg);
  background-color: var(--color-darkg);
  color: var(--color-primary);
  margin: 0;
  padding: 0;
  position: relative;
  width: 100vw;
}

[gradient] {
  position: absolute;
  width: 100%;
  height: 85vw;
  bottom: 0;
  left: 0;
  background: var(--gradiand-hero);
  transform: rotate(180deg);
}

[color=primary]   { color: var(--color-primary); }
[color=secondary] { color: var(--color-secondary); }
[color=aqua]      { color: var(--color-aqua); }
[color=coral]     { color: var(--color-coral); }
[color=white]     { color: var(--color-white); }
[color=black]     { color: var(--color-black); }
[color=green]     { color: var(--color-green); }
[color=lime]      { color: var(--color-lime); }
[color=darkg]     { color: var(--color-darkg); }
[color=gray]      { color: var(--color-gray); }
[color=blue]      { color: var(--color-blue); }
[color=cream]     { color: var(--color-cream); }

.bg-primary  { background-color: var(--color-primary); }
.bg-secondary{ background-color: var(--color-secondary); }
.bg-aqua     { background-color: var(--color-aqua); }
.bg-coral    { background-color: var(--color-coral); }
.bg-white    { background-color: var(--color-white); }
.bg-black    { background-color: var(--color-black); }
.bg-green    { background-color: var(--color-green); }
.bg-lime     { background-color: var(--color-lime); }
.bg-darkg    { background-color: var(--color-darkg); }
.bg-gray     { background-color: var(--color-gray); }
.bg-blue     { background-color: var(--color-blue); }
.bg-cream    { background-color: var(--color-cream); }

* { box-sizing: border-box; }
[nomargin]{*{ margin: 0;}}
.hide-scrollbars::-webkit-scrollbar{display:none;}
.hide-scrollbars{-ms-overflow-style:none;scrollbar-width:none;}
.container {max-width: var(--space-cont);margin: 0 auto;position: relative;width: 90%;}
a,a:active,a:visited{
	&:not([color]){color:inherit;}
}

section { padding-top: var(--space-6xl); position: relative; }
section .inner { opacity: 0; transform: translateY(100px); }

h1,h2,h3,h4,h5,h6{ font-weight: 400; text-wrap: balance; margin:0;}
p{
	@media (max-width:700px){
		& br{display:none;}
	}
	a{color:var(--color-aqua);}
}

.no-select {
-webkit-user-select: none; /* Safari */
-ms-user-select: none;     /* old Edge/IE */
user-select: none;         /* modern browsers */
-webkit-touch-callout: none; /* iOS long-press menu */
}

/* HEADER */
#main-header {
	padding: var(--space-xl) 5%;
	position: fixed;top: 0;z-index: 100;width: 100%;left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	box-sizing: border-box;

	.logo{width: 180px;}
	.header-cta{
		padding: 0.55rem 1.25rem;
		font-size: 0.9rem;
	}
	@media (max-width:700px){
		.logo{width: 140px;}
		.header-cta{padding: 0.45rem 1rem; font-size: 0.85rem;}
	}
	
	/* nav */
	nav{
		opacity: 0; 
		overflow: hidden;
		position: absolute;
		right: -100px;
		top: -100px;
		border-bottom-left-radius: 20px;
		background: var(--gradiand-menu);
		transition: right .3s ease-in-out, top .3s ease-in-out,  opacity .5s ease-in-out;
		pointer-events: none;
		padding:60px 150px 60px 60px;
		ul{ margin:0;padding: 0;display: flex;flex-direction: column;gap: var(--space-sm);}
		li{ list-style: none;font-size: var(--font-md);}
		a{text-decoration: none;font-size:1rem;}
	}
	
	.logo{margin-top:9px;}
	
	/* active */
	&.active{
		nav{opacity: 1;right: 0;top: 0;pointer-events: initial;}
	}
	
	@media (max-width:700px){
		& .logo{width:150px;margin-top:10px;}
	}
}

.logo {
	width: 16%;display: block;
	img, svg{ width: 100%; }
}

.menu-btn {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	position: absolute;
	right: 5%;
	top: var(--space-xl);
	
	span,
	&::before,
	&::after{width: 35px;background: var(--color-primary);transition: all .5s ease-in-out;}
	span{ position: absolute;height: 2px;}
	&::before{transform: translateY(-8px);content: "";position: absolute;height: 3px;}
	&::after{transform: translateY(8px);content: "";position: absolute;height: 1px;}
	
	/* active */
	.active & span{position: absolute;width: 0;}
	.active &::before{transform: translateY(0) rotate(45deg);}
	.active &::after{transform: translateY(0) rotate(-45deg);}
}

.btn {
	background-color: var(--color-primary);
	color: var(--color-white);
	padding: var(--space-xs) var(--space-lg);
	border: none;
	border-radius: var(--radius-pill);
	font: inherit;
	font-size: var(--font-md);
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	color: white !important;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	&:hover{
		transform: translateY(-1px);
		box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	}
}

[firstsection]{
	#trusted{
		padding-top:0;
		padding-bottom:5%;
		p{width:unset;text-wrap:balance;}
	}
}

/* HERO */
#hero {
	background: var(--gradiand-hero);
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--space-6xl) 0 var(--space-4xl);
	position: relative;
	margin: 0;
	overflow: hidden;
	isolation: isolate;

	picture{
		position: absolute;
		inset: 0;
		z-index: -2;
		display: block;
	}
	img.hero-bg{
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 30%;
		-webkit-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;
	}
	&::before{
		content:"";
		position:absolute;
		inset:0;
		background: linear-gradient(180deg, rgba(5,11,10,0.45) 0%, rgba(5,11,10,0.15) 40%, rgba(5,11,10,0.75) 100%);
		z-index: -1;
		pointer-events: none;
	}
	@media (min-width: 1024px){
		img.hero-bg{object-position: 50% 35%;}
	}
	h1{font-size: var(--font-3xl);font-weight: 500;line-height: 1;margin: 0 var(--padding) var(--space-md);
	text-shadow: 0px 0px 34px rgba(0,0,0,0.4);width: 70%;}
	.hero-tagline{
		margin: 0 var(--padding) var(--space-lg);
		max-width: 60ch;
		font-size: var(--font-md);
		line-height: 1.4;
		text-shadow: 0px 0px 24px rgba(0,0,0,0.5);
	}
	.btn{display: inline-block;margin: 0 var(--padding);}
	.photo-credit{
		position: absolute;
		right: var(--padding, 1rem);
		bottom: 1rem;
		margin: 0;
		font-size: 0.7rem;
		line-height: 1.2;
		color: rgba(255,255,255,0.7);
		text-shadow: 0 1px 2px rgba(0,0,0,0.6);
		letter-spacing: 0.02em;
		z-index: 1;
		a{color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;}
		a:hover{color: #fff;}
	}
	@media (max-width:700px){
		& h1{width:unset;font-size: clamp(2rem, 8vw, 2.75rem);}
		.hero-tagline{font-size: 0.95rem;}
		.photo-credit{font-size: 0.65rem;}
	}
}

[pagecontent]{
	max-width: var(--space-cont);
	margin: 0 auto;
	padding:0 5%;
	position: relative;
	width: 90%;
	h2{color:var(--color-aqua);}
	h3{color:var(--color-coral);}
	h4{color:var(--color-lime);}
	p:has(+ :is(h1, h2, h3, h4)) + :is(h1, h2, h3, h4) {
	  margin-top: 10%;
	}
	hr{border:1px solid var(--color-primary);margin:10% 0;opacity:0.1;}
}

#trusted{
	.container{padding-left: var(--padding);}
	.bcakg{
		position: absolute;left: 0;width: 100%;top: 50%;transform: translateY(-50%);
		z-index: -1;mix-blend-mode: multiply;
		img{width:100%;}
	}
	p{margin: 0 0 var(--space-5xl);color: var(--color-dark);width: 40%;}
	
	/* logos */
	.logos{
		display: flex;
		flex-wrap: nowrap;
		gap: var(--space-xl);
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;          /* Firefox */
		-ms-overflow-style: none;       /* IE 10+ / Edge Legacy */
		-webkit-overflow-scrolling: touch; /* inercia en iOS */
		&::-webkit-scrollbar { width: 0;height: 0;display: none;}
	}
	
	@media (max-width: 700px){
		.bcakg{scale:2;top:120%;}
	}
}

.bg-img{
  position: absolute;
  top: 0;
  right: 0;
  width: 30.5vw;
  max-width: var(--max-bg-deco);
}

.feature-card {
	width: 31.5%;
	height: 42.3vw;
	max-height: var(--card-mh);
	border-radius: var(--radius-xl);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	background-blend-mode: overlay;
	padding: 8% 4% 4%;
	transform: translateY(0);
	transition: transform 0.7s ease-in-out;
	position:relative;
	overflow:hidden;
	
	span {font-size: 62px;line-height: 1;margin: 0 auto auto;}
	h3 {margin: 0 0 var(--space-xxs);font-size: var(--font-lg);}
	p {margin: 0;}
	
	/* active */
	.active &{
		&.bg-primary{transform: translateY(var(--space-6xl)); }
		&.bg-secondary{padding-top: 12.5%;transform: translateY(calc(-1 * var(--space-6xl)));}
	}
	
	/* breakpoint */
	@media (max-width:900px){
		&{transform:none !important;width:90%;min-width:300px;padding-top:max(400px,50%) !important;}
		&>span{position:absolute;top:17%;left:50%;transform:translateX(-50%);}/* icon */
		&>*{font-size:1.5rem;}
	}
}

#services .feature-card .card-media{position:absolute;inset:0;display:block;}
#services .feature-card .card-media img{width:100%;height:100%;object-fit:cover;}

#services{
	background:var(--gradient-cover);
	.cards-dig {display: flex;justify-content:space-between;padding: var(--space-6xl) 0;overflow:hidden;overflow-x:auto;gap:20px;}
	.parraf {padding-left: var(--padding);}
	.parraf h2 {font-size: var(--font-lg);}
	.parraf:last-of-type {left: 0%;position: relative;transition: left 0.5s ease-in-out;}
	&.active .parraf:last-of-type {left: 35%;width: 65%;}
	@media (max-width:700px){
		& .cards-dig{padding:40px 0;}
		& .parraf{padding:0;left:0 !important;width:100% !important;}
	}
}

#features{
	background:var(--gradient-cover2);
	.container{
		display: flex;justify-content: space-between;flex-wrap: wrap;column-gap:var(--space-1xl);
		&>*{flex:1;min-width:300px;flex-basis:40%;}
		.no-flex > * {width: 100%;}
		h3{margin-top:0;}
	}
	
	.box {
		width: calc(50% - var(--space-md));
		margin-bottom: calc(2 * var(--space-md));
		border-radius: var(--radius-xl);
		padding: var(--space-lg);
		display: flex;
		align-items: flex-start;
		gap: 5%;
		position: relative;
		z-index: -1;
		&.animate-visible {z-index: 1;}
		.material-symbols-outlined {font-size: var(--font-xl);margin-bottom: var(--space-4xl);}
		h3{margin: 0 0 var(--space-md);}
		p {font-size: var(--font-md);margin: 0;}
		p + p{margin-top: var(--space-md);}
		svg {width: var(--space-6xl);margin-bottom: var(--space-4xl);}
	}
	
	.bg-img {top: calc(100% - var(--space-5xl));right: calc(50% - var(--space-4xl));}
}

#more{
	background:var(--gradient-cover2);
	margin-top: var(--space-2xl);
	div{text-align: center;width: 84%;margin: 0 auto;}
	p{margin:0;}
}

#aboutus{
	background:var(--gradient-cover2);
	.container{
		display:flex;flex-wrap:wrap;
		&>*{flex:1;min-width:300px;}
	}
	img{width:90%;margin-bottom: calc(-1 * var(--space-xl));mix-blend-mode:multiply;opacity:0.9;}
	h3{font-size: var(--font-3xl);margin: 0 0 var(--space-xl) var(--padding);}
	p{margin: 0 0 0 var(--padding);}
	p:last-of-type{margin: var(--space-xl) 0 40px var(--padding);}
	
	.meters{
		--color:var(--color-aqua);
		display:flex;flex-direction:column;gap:40px;
		margin:40px var(--padding);
		[meter]{position:relative;display:flex;align-items:center;background:black;
			border-radius:200em;border:5px solid black;}
		label{font-size:18px;display:inline-block;padding:2px 15px;margin:0;color:black;
			position:relative;z-index:2;width:150px;background:rgba(0,0,0,0.2);}
		i{display:block;position:absolute;top:0px;left:0;width:0%;height:100%;
			background:var(--color);z-index:1;overflow:hidden;text-align:right;
			border-radius:200em;font-size:16px;padding:3px 10px;color:rgba(0,0,0,0.7);}
	}
	
}

#givingback{
	.container{
		display:flex;flex-wrap:wrap;
		&>*{flex:1;min-width:300px;padding:0 5%;}
	}
	h3{font-size: var(--font-3xl);color:var(--color-aqua);}
	span{color:var(--color-coral);}

	[col2]{
		display:flex;flex-direction:column;
		padding:0;justify-content:center;
		[media]{
			overflow:hidden;border-radius:20px;margin-top:5%;
			img{object-fit:cover;width:100%;height:100%;}
		}
	}
}

#cta{
	.container{border-radius: var(--radius-xl);overflow: hidden;width: 90%;max-width: 1215px;}
	img{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;mix-blend-mode: overlay;z-index: -1;}
	div{position: relative; padding: var(--padding);}
	p{ margin: 0 0 var(--space-xl); }
}

/* FOOTER */
footer{
	margin-top: var(--space-6xl);
	.container{display: flex;flex-direction: column;align-items: center;gap: var(--space-md);}
	nav{display: flex;flex-direction: column;align-items: center;gap: var(--space-sm);}
	.footer-logo{width: 180px;}
	.footer-logo img,.footer-logo svg{width: 100%;display: block;}
	@media (max-width:700px){
		.footer-logo{width: 140px;}
	}
}

.nav-list {
	display: flex;
	list-style: none;
	align-items: center;
	gap: var(--space-lg);
	padding: var(--space-sm) var(--space-3xl);
	margin: 0 0 var(--space-md);
	background-color: var(--color-fnave);
	border-radius: var(--radius-pill); /* estilo cápsula */
	font-weight: 400;
	
	li{display: flex;align-items: center;margin: 0;padding: 0;}
	a{font-size: var(--font-md);text-decoration: none;font-weight: 400;}
}

.nav-extra {
  display: flex;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0 0 var(--space-3xl);
  gap: var(--space-xs); /* espacio alrededor del separador */
  
  li{position: relative;font-size: var(--font-sm);color: var(--color-primary);opacity: .64;}
  li:not(:last-child)::after {content: "·";margin-left: var(--space-xs);color: currentColor;opacity: 0.6;}
  a{ color: var(--color-primary); text-decoration: none; }
}

/* modal contact form */
[modal]{
  opacity:0;height:0;font-size:1rem;overflow:hidden;
  position:fixed;inset:0;background:var(--color-green);backdrop-filter: blur(10px);
  transition:all 0.5s ease;z-index:101;
  & [close]{
    position:fixed;top:5vw;right:5vw;text-decoration:none;z-index:101;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
  }
  [close]::before,
  [close]::after {
    width: 35px;
    background: var(--color-primary);
  }
      
  [close]::before {
    content: "";
    position: absolute;
    height: 3px;
    transform: translateY(0) rotate(45deg);
  }
  
  [close]::after {
    content: "";
    position: absolute;
    height: 1px;
    transform: translateY(0) rotate(-45deg);
  }
  & [wrap]{display:flex;align-items:center;flex-direction:column;justify-content:start;height:100%;overflow:hidden;overflow-y:auto;background: var(--gradiand-hero);}
  & img {object-fit:cover;width:100%;height:100%;position: absolute; mix-blend-mode: multiply; }
  & form{padding:max(30px, 5%);margin:auto;width:800px;max-width:100%;display:flex;flex-direction:column;gap:2rem;position:relative;opacity:0;transition:all 1s ease-in-out;}
  & h3{margin:0;font-size:var(--font-2xl);line-height:1.2;color:var(--color-aqua);}
  & label{display:flex;gap:1rem;background:rgba(0,0,0,0.8);outline: 1px solid black;transition:all 0.3s ease;}
  & label:focus-within{outline: 1px solid var(--color-aqua);}
  & label>span{padding:22px;min-width:10%;color:var(--color-aqua);}
  & input,textarea{border:0;background:none;color:var(--color-aqua);font-size:1.3rem;padding:20px;line-height:1.2;flex-grow:1;outline:none;}
  & textarea{height:200px;}
  & button{margin:auto;}
  & ::placeholder{color:rgb(from var(--color-aqua) r g b / 0.5);font-style:italic;}
  & [notice]{display:none;}
  & [thankyou]{opacity:0;transition:all 0.5s ease;margin:auto;z-index:101;text-align:center;}
  /* open */
  &[open]{
    opacity:1;height:auto;min-height:1px;
    & form{opacity:1;}
  }
  /* success */
  &[success]{
    [thankyou]{opacity:1;}
    form{opacity:0;display:none;}
  }
  &[error]{
    [notice]{display:block;}
    [notice] h3{color:var(--color-coral);font-size:1.6rem;}
  }
}

/* standalone authorization pages */
.auth-page{
  background: var(--color-black);
  color: var(--color-primary);
}
.auth-hero{
  position: relative;
  min-height: 45vh;
  display: flex;
  align-items: center;
  padding: clamp(80px, 12vw, 160px) 0;
  overflow: hidden;
}
.auth-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  opacity: 0.32;
  filter: grayscale(100%);
}
.auth-hero[data-theme="credit-card"]::before{
  background-image: linear-gradient(135deg, rgba(0,0,0,0.85), rgba(0,0,0,0.35)), url('/_templates/img/screenshots2.webp');
}
.auth-hero[data-theme="ach"]::before{
  background-image: linear-gradient(135deg, rgba(0,0,0,0.85), rgba(0,0,0,0.35)), url('/_templates/img/screenshots.webp');
}
.auth-hero .container{
  position: relative;
  z-index: 1;
}
.auth-hero h1{
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  margin: 0 0 var(--space-md);
  color: var(--color-white);
}
.auth-hero p{
  max-width: min(720px, 100%);
}
.eyebrow{
  text-transform: uppercase;
  letter-spacing: 0.4em;
  font-size: 0.8rem;
  color: var(--color-aqua);
  margin-bottom: var(--space-sm);
  display: inline-block;
}

.auth-section{
  padding: clamp(60px, 10vw, 140px) 0;
  background: radial-gradient(circle at top, rgba(19,145,130,0.15), transparent 70%), #050505;
}
.auth-section__header{
  margin-bottom: var(--space-2xl);
  display: flex;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.auth-section__header h2{
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--color-white);
}

.auth-form-card{
  width: 100%;
  background: rgba(0,0,0,0.78);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 6vw, 64px);
  box-shadow: 0 40px 80px rgba(0,0,0,0.45);
}
.auth-form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}
.auth-field{
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.08);
}
.auth-field span{
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-aqua);
}
.auth-field input,
.auth-field select,
.auth-field textarea{
  border: none;
  background: transparent;
  color: var(--color-primary);
  font-size: 1.05rem;
  font-family: inherit;
  outline: none;
}
.auth-field input::placeholder,
.auth-field textarea::placeholder{
  color: rgba(255,255,255,0.45);
  font-style: italic;
}
.auth-field select{
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l7 7 7-7' stroke='%2379E5D8' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.auth-field textarea{
  min-height: 160px;
  resize: vertical;
}
.auth-field--wide{
  grid-column: 1 / -1;
}
.auth-field--split{
  gap: var(--space-md);
}
.auth-field__row{
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.auth-field__row label{
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255,255,255,0.02);
}
.auth-field__row input{
  width: 60px;
  background: transparent;
  border: none;
  color: var(--color-primary);
  font-size: 1.2rem;
  font-family: inherit;
}
.auth-field__row small{
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.6);
}

@media (max-width: 780px){
  .auth-form-grid{
    grid-template-columns: 1fr;
  }
}

.auth-form__actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}
.form-status{
  margin: 0;
  min-height: 1.5rem;
  flex: 1;
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
}
.form-status:empty{
  display: none;
}
.form-status[data-state="error"]{
  color: var(--color-coral);
}
.form-status[data-state="success"]{
  color: var(--color-aqua);
}
.auth-form__footnote{
  font-size: 0.95rem;
  color: rgba(255,255,255,0.6);
  margin-top: var(--space-xl);
  text-align: center;
}

.visually-hidden{
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
}

/* paperless payments page */
.paperless-page{
  background: #050505;
  color: var(--color-primary);
}
.paperless-hero{
  padding: clamp(160px, 18vw, 240px) 0 clamp(90px, 10vw, 150px);
  background-image: linear-gradient(135deg, rgba(5,5,5,0.92), rgba(5,5,5,0.6)), url('/_templates/img/zambezi2-1600.webp');
  background-size: cover;
  background-position: center;
  color: var(--color-white);
}
.paperless-hero h1{
  font-size: clamp(2.8rem, 6vw, 4rem);
  margin: 0 0 var(--space-md);
  color: var(--color-white);
}
.paperless-hero p{
  max-width: min(720px, 100%);
  margin: 0 0 var(--space-xl);
  color: rgba(255,255,255,0.85);
}
.paperless-hero__cta{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.btn--ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.6);
  color: var(--color-white) !important;
}
.btn--ghost:hover{
  background: rgba(255,255,255,0.08);
  box-shadow: none;
}
.paperless-details{
  padding: clamp(80px, 12vw, 160px) 0;
  background: radial-gradient(circle at top, rgba(121,229,216,0.08), transparent 70%);
  color: rgba(255,255,255,0.85);
}
.paperless-details__grid{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-3xl);
}
@media (max-width: 900px){
  .paperless-details__grid{
    grid-template-columns: 1fr;
  }
}
.paperless-details__copy h2{
  color: var(--color-aqua);
  margin: 0 0 var(--space-lg);
}
.paperless-details__copy p{
  margin: 0 0 var(--space-md);
}
.paperless-list{
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.paperless-list li{
  position: relative;
  padding-left: var(--space-xl);
  color: rgba(255,255,255,0.8);
}
.paperless-list li::before{
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-coral);
}
.paperless-highlight{
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  color: rgba(255,255,255,0.9);
}
.paperless-highlight h3{
  margin: 0 0 var(--space-md);
  color: var(--color-white);
}
.paperless-options{
  padding: clamp(80px, 12vw, 160px) 0;
  color: rgba(255,255,255,0.9);
}
.paperless-options__header{
  margin-bottom: var(--space-2xl);
  max-width: min(720px, 100%);
}
.paperless-options__header h2{
  color: var(--color-aqua);
  margin: 0 0 var(--space-md);
}
.paperless-options__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-2xl);
}
.paperless-card{
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,0.08);
  padding: var(--space-2xl);
  background: rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-height: 100%;
}
.paperless-card h3{
  margin: 0;
  color: var(--color-coral);
}
.paperless-card p{
  margin: 0;
  color: rgba(255,255,255,0.78);
  flex: 1;
}
.paperless-card .btn{
  align-self: flex-start;
}