/* =======================================
   Fluid scales, tokens & sensible defaults
======================================= */
:root {
  	/* Spacing & layout */
  	--gutter: clamp(12px, 3vw, 32px);
  	--gutter-sm: clamp(8px, 2.2vw, 24px);
  	--content-max: 72rem;                /* ~1152px */
  	--sticky-max: clamp(640px, 85vw, 980px);
  	--sticky-top: 106px;
  	--radius-xl: 999px;

  	/* Color & elevation */
  	--bg: #F7F7F7;
  	--bg-elev: #ffffff;
  	--brand: #0F6DB7;
  	--text: #333;
  	--line: #D7D7D7;
  	--shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.11);

  	/* Type scale */
  	--fs-base: clamp(14px, 1.2vw, 16px);
  	--fs-sm: clamp(12px, 1vw, 14px);
  	--fs-lg: clamp(16px, 1.4vw, 18px);

  	/* Motion */
  	--ease-smooth: ease;
  	--ease-elastic: cubic-bezier(0.33, 1, 0.68, 1);
}

html { scroll-behavior: smooth; }
body, .box-wrapper { overflow: visible !important; }
.menu-wrapper { background: var(--bg) !important; }

/* =======================================
   Product content
======================================= */
.ip-product-content { margin-top: 3rem; }

.ip-product-row {
  	display: flex;
  	flex-wrap: wrap;
  	align-items: flex-start;
  	gap: clamp(1rem, 2.5vw, 2rem);
  	padding-inline: var(--gutter);
  	margin-bottom: 2rem;
}

.ip-product-image {
  	flex: 0 0 auto;
  	width: min(100%, 420px) !important;
}

.ip-product-image img {
  	width: 100%;
  	height: auto;
  	border-radius: 16px;
}

.ip-product-text {
  	flex: 1 1 320px;
  	min-width: 260px;
}

#productHeader,
#sectionHeader,
.sub-blocks,
.ip-description {
  	font-family: 'Inter', sans-serif;
}

#productHeader { margin-bottom: 1rem; }
#sectionHeader { font-size: 1.75rem; margin-bottom: 1rem; }

.ip-description {
  	font-size: clamp(14px, 1.2vw, 16px);
  	line-height: 1.55;
}

.ip-content-row { padding: 2rem 0; }
.line-break { color: var(--line); }

/* =======================================
   Sticky row
======================================= */
.sticky-sentinel { height: 1px; }

.ip-sticky-row {
  	position: sticky;
  	top: var(--sticky-top);
  	z-index: 999;
  	display: flex;
  	align-items: center;
  	justify-content: space-evenly;
  	margin: 0;
  	max-width: none;
  	padding: .5rem;
  	padding-inline: var(--gutter);
  	background-color: var(--bg);
  	border-radius: 0;
  	box-shadow: none;
  	transition:
    	top .3s var(--ease-smooth),
    	box-shadow .3s var(--ease-smooth),
    	background-color .3s var(--ease-smooth),
    	border-radius .4s var(--ease-elastic),
    	max-width .4s var(--ease-elastic),
    	margin .4s var(--ease-elastic),
    	padding .4s var(--ease-elastic);
}

/* Title area */
.sticky-title {
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	width: 0%;
  	overflow: hidden;
  	flex-shrink: 0;
  	transition: width .4s var(--ease-smooth);
}

.sticky-title h2 {
  	margin: 0;
  	white-space: nowrap;
  	opacity: 0;
  	font-size: var(--fs-lg);
  	transition: opacity .3s var(--ease-smooth);
}

/* Reveal state */
.ip-sticky-row.reveal .sticky-title { width: 33% !important; }

.ip-sticky-row.reveal .sticky-title h2 {
  	cursor: pointer;
  	opacity: 1 !important;
  	transition-delay: .3s;
}

/* Stuck+reveal elevated chip */
.ip-sticky-row.reveal.is-stuck {
  	margin: 0 auto;
  	max-width: var(--sticky-max);
  	padding: .75rem clamp(1rem, 3vw, 1.5rem);
  	background-color: var(--bg-elev) !important;
  	border-radius: var(--radius-xl);
  	box-shadow: var(--shadow-lg);
  	transition:
    	top .4s var(--ease-smooth),
    	box-shadow .4s var(--ease-smooth),
    	background-color .4s var(--ease-smooth),
    	border-radius .5s var(--ease-elastic) .05s,
    	max-width .5s var(--ease-elastic) .05s,
    	margin .5s var(--ease-elastic) .05s,
    	padding .5s var(--ease-elastic) .05s;
}

/* Dropdown cluster */
.dropdown-wrapper { 
	display: flex; 
	justify-content: center; 
	position: relative; 
}

#headerDropdown {
  	font-size: 1rem;
  	margin: 0;
  	padding-right: 2rem;
  	border-radius: 8px;
  	background-color: var(--bg);
  	cursor: pointer;
  	appearance: none; -webkit-appearance: none; -moz-appearance: none;
  	transition: background-color .2s var(--ease-smooth), color .2s var(--ease-smooth);
}

#headerDropdown:hover { background-color: #ededed !important; }
#headerDropdown:focus-visible { background-color: #ededed !important; }

#dropdownIcon {
  	position: absolute;
  	right: 1rem;
  	top: 50%;
  	transform: translateY(-50%);
  	pointer-events: none;
  	color: #555;
}

/* CTA pill */
.cta-btn-wrapper { 
	width: 33%; 
	display: flex; 
	justify-content: center; 
}

.cta-pill {
  	display: inline-block;
  	padding: .5rem 1.25rem;
  	background-color: #000;
  	color: var(--bg);
  	border: 2px solid #000;
  	border-radius: var(--radius-xl);
  	text-decoration: none;
  	font-weight: 600;
  	font-size: 1rem;
  	transition: background-color .2s var(--ease-smooth), color .2s var(--ease-smooth);
}
.cta-pill:hover {
  	color: #000 !important;
  	background-color: var(--bg) !important;
}

/* Make the stuck dropdown match elevation */
.ip-sticky-row.reveal.is-stuck #headerDropdown { background-color: var(--bg-elev) !important; }
.ip-sticky-row.reveal.is-stuck #headerDropdown:hover { background-color: var(--bg) !important; }
.ip-sticky-row.reveal.is-stuck #headerDropdown:focus-visible { background-color: var(--bg) !important; }

/* Optional anchor reset for the title link */
.scroll-to-top { text-decoration: none; color: inherit; }

/* =======================================
   Media / figure utilities
======================================= */
.centered-figure {
  	margin: 2rem auto;
  	max-width: min(720px, 100%);
  	padding-inline: var(--gutter);
  	text-align: center;
}

.centered-figure img,
.sub-block img,
.sub-blocks img.inline {
  	display: block;
  	margin: 0 auto .75rem;
  	max-width: 100%;
  	height: auto;
  	cursor: pointer;
}

/* Make inline SVGs clickable */
.sub-blocks svg,
.ip-product-image svg { cursor: pointer; }

/* =======================================
   Text & lists
======================================= */
.sub-blocks a { color: var(--brand) !important; }
.sub-blocks a:hover { text-decoration: underline; }

.sub-blocks ul,
.sub-blocks ol {
  	margin: 0 0 1rem;
  	padding-left: 1.25rem;
  	list-style: revert;
}

.sub-blocks ol { list-style: decimal; }

.sub-block:has(p:only-child > img:first-child + br + span:last-child) {
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	text-align: center;
  	font-family: 'Inter', sans-serif;
}

/* =======================================
   Two-column section
======================================= */
.sub-columns {
  	display: grid;
  	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  	align-items: start;
  	gap: clamp(1rem, 3vw, 2rem);
  	padding-inline: var(--gutter);
}

.sub-column ul {
  	margin: 0 0 1rem;
  	padding-left: 1.25rem;
  	list-style: disc !important;
}

.row-block {
  	padding-inline: var(--gutter);
  	margin-bottom: 1rem;
  	color: var(--text);
  	font-family: 'Figtree', sans-serif;
  	font-size: var(--fs-base);
  	line-height: 1.6;
}

.sub-columns .sub-column .sub-block { break-inside: avoid; }

/* =======================================
   Tables (responsive)
   (Wrap in .table-scroll when possible)
======================================= */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.sub-block table,
.table-with-label > div > table {
  	width: 100%;
  	max-width: 100%;
  	table-layout: auto;
  	border-collapse: collapse;
}

.sub-block table th,
.sub-block table td {
  	font-size: clamp(12px, 1.4vw, 16px);
  	line-height: 1.4;
  	white-space: normal;
  	overflow-wrap: anywhere;
}

.nowrap {
  	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
}

.table-with-label > div {
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
}

.table-with-label > div > p > span {
  	color: #000;
  	font-size: clamp(16px, 1.3vw, 18px);
}

.table-with-label th {
  	padding: 0;
  	padding-right: clamp(12px, 2vw, 32px);
  	padding-left: 5px;
  	border-left: 0;
  	color: #000;
  	vertical-align: top;
}

.table-with-label td {
  	padding-left: 5px;
  	font-weight: normal !important;
}

/* =======================================
   SVG Popup
======================================= */
#svgOverlay {
  	position: fixed;
  	inset: 0;
  	z-index: 2000;
  	display: none;
  	align-items: center;
  	justify-content: center;
  	background: rgba(0,0,0,0.6);
  	overscroll-behavior: contain;
  	touch-action: none;
}

/* Popup box */
.svg-popup {
  	position: relative;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	width: 100%;
  	height: 100%;
  	max-width: 75vw;
  	max-height: 75vh;
  	padding: .5rem;
  	overflow: hidden;
  	background: #fff;
  	border-radius: 8px;
  	box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

/* Close button */
.svg-close {
  	position: absolute;
  	top: .25rem;
  	right: .5rem;
  	background: none;
  	border: none;
  	color: #333;
  	font-size: 2rem;
  	line-height: 1;
  	cursor: pointer;
}

/* SVG sizing inside popup */
.svg-popup svg {
  	display: block;
  	width: auto;
  	height: auto;
  	max-width: 100%;
  	max-height: 100%;
}

/* support <img> */
.svg-popup .svg-content {
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	width:100%;
  	height:100%;
}

.svg-popup img {
  	display:block;
  	width:100%;
  	height:100%;
  	max-width:100%;
  	max-height:100%;
}

/* =======================================
   Footnote
======================================= */
.ai-disclosure {
	display: flex;
    justify-content: flex-end;
	position: relative;
    top: -40px;
    height: 0;
}

.ai-disclosure small {
	color: #c9c9c9;
	margin-top: 0;
}

/* =======================================
   Heading padding harmony
======================================= */
h2 { padding-inline: var(--gutter); }

/* =======================================
   Breakpoints
======================================= */

/* Large tablets / small laptops */
@media (max-width: 1100px) {
  	.ip-sticky-row.reveal.is-stuck { max-width: clamp(540px, 88vw, 900px); }
  	.ip-sticky-row.reveal .sticky-title { width: 40% !important; }
}

/* Tablets */
@media (max-width: 900px) {
  	.ip-sticky-row.reveal .sticky-title { width: 45% !important; }
  	.sub-columns { grid-template-columns: 1fr 1fr; }
}

/* Phones & small tablets */
@media (max-width: 768px) {
  	.sub-columns {
    	grid-template-columns: 1fr;
    	gap: 0;
    	padding-inline: var(--gutter-sm);
  	}

  	.row-block,
  	h2 { padding-inline: var(--gutter-sm); }

  	.ip-product-row {
    	flex-direction: column;
    	align-items: center;
    	gap: 1.5rem;
    	text-align: center;
    	padding-inline: var(--gutter-sm);
  	}

  	.ip-product-image { max-width: 420px; }
  	.ip-product-text { width: 100%; flex: unset; }

  	.ip-sticky-row.is-stuck {
    	top: 5px !important;
    	margin: 0 auto;
    	width: fit-content !important;
    	padding-inline: clamp(12px, 4vw, 20px);
    	background-color: var(--bg-elev) !important;
    	border-radius: var(--radius-xl);
    	box-shadow: var(--shadow-lg);
  	}

  	.ip-sticky-row.is-stuck .sticky-title { display: none !important; }
  	.ip-sticky-row.is-stuck div:last-child { width: fit-content !important; }
  	.ip-sticky-row.is-stuck #headerDropdown { background-color: var(--bg-elev) !important; }

  	.sub-block img { padding-inline: var(--gutter-sm); }
  	.table-with-label th { padding-right: clamp(12px, 4vw, 24px); }
}

/* Very small phones */
@media (max-width: 400px) {
  	.ip-sticky-row { padding-inline: 10px; }
  	.ip-description { font-size: clamp(13px, 4vw, 15px); }
}

/* =======================================
   Motion sensitivity
======================================= */
@media (prefers-reduced-motion: reduce) {
  	.ip-sticky-row,
  	.ip-sticky-row.reveal.is-stuck {
    	transition: none !important;
  	}
}