/* Base reset, typography, RTL foundation. Logical properties used throughout
   so the codebase stays direction-agnostic (design review note #7). */

*, *::before, *::after { box-sizing: border-box; }

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

html[dir="rtl"] body { direction: rtl; }

body {
	margin: 0;
	font-family: var(--oi-font);
	background: var(--oi-paper);
	color: var(--oi-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

/* Last-resort guard against page-level horizontal scroll. The actual layouts
   are responsive on their own (grids collapse, children get min-width:0) —
   this only catches stray decorative overhangs (e.g. the hero's floating
   chips poking past the viewport edge). overflow-x: clip, unlike hidden,
   does NOT create a scroll container, so position: sticky descendants
   (header, announcement bar, order summary) keep working. */
html, body { overflow-x: clip; }

img, svg { max-width: 100%; display: block; }

/* Icon SVGs (from openiranip_icon()) sit inline next to text everywhere —
   override the block reset above so icon+label pairs never wrap onto
   separate lines, whether or not their parent is a flex container. */
.oi-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

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

button { font-family: inherit; cursor: pointer; }

input, textarea, select, button { font-family: inherit; font-size: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

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

h1, h2, h3 { color: var(--oi-ink); font-weight: 800; line-height: 1.3; }

.oi-container {
	max-width: var(--oi-container);
	margin-inline: auto;
	padding-inline: 40px;
}

.oi-container--wide { max-width: var(--oi-container-wide); }
.oi-container--narrow { max-width: var(--oi-container-narrow); }

@media (max-width: 782px) {
	.oi-container { padding-inline: 20px; }
}

.oi-hide-mobile { }
.oi-hide-desktop { display: none; }
@media (max-width: 782px) {
	.oi-hide-mobile { display: none; }
	.oi-hide-desktop { display: initial; }
}

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

.oi-skip-link {
	position: absolute;
	inset-inline-start: -999px;
	top: 0;
	z-index: 999;
	background: var(--oi-ink);
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 10px 10px;
}
.oi-skip-link:focus {
	inset-inline-start: 0;
}

:focus-visible {
	outline: 2px solid var(--oi-blue);
	outline-offset: 2px;
}

/* Section rhythm shared by every page (design review: consistent section identity) */
.oi-section { padding: 88px 0; }
.oi-section--tight { padding: 56px 0; }
.oi-section--alt { background: var(--oi-ice); }
.oi-section--dark { background: var(--oi-dark-gradient); color: #fff; }

@media (max-width: 782px) {
	.oi-section { padding: 48px 0; }
	.oi-section--tight { padding: 36px 0; }
}

.oi-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--oi-tint-blue);
	color: var(--oi-blue);
	font-size: 13px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: var(--oi-radius-pill);
	margin-bottom: 14px;
}

.oi-section-head {
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
	margin-bottom: 44px;
}
.oi-section-head h2 { font-size: 30px; }
.oi-section-head p { color: var(--oi-muted); font-size: 15.5px; margin-top: 12px; }

@media (max-width: 782px) {
	.oi-section-head { margin-bottom: 28px; }
	.oi-section-head h2 { font-size: 20px; }
	.oi-section-head p { font-size: 13px; }
}

.oi-grid {
	display: grid;
	gap: var(--oi-gap);
}

/* A 1fr track can never shrink below its content's min-content size, so a
   long price/URL inside a card silently forces the whole grid (and page)
   wider than the viewport. min-width:0 on grid children is what lets tracks
   actually share the available width. */
.oi-grid > * { min-width: 0; }

.oi-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.oi-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.oi-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.oi-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }

/* IMPORTANT: these mobile overrides have the same specificity as the base
   column rules above, so they only win through source order — they must stay
   BELOW the base rules. (They previously sat above them, which made every
   3/4/5-column grid keep its desktop column count on phones and overflow
   horizontally.) */
@media (max-width: 960px) {
	.oi-grid--cols-3,
	.oi-grid--cols-4,
	.oi-grid--cols-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.oi-grid--cols-2,
	.oi-grid--cols-3,
	.oi-grid--cols-4,
	.oi-grid--cols-5 { grid-template-columns: 1fr; }

	/* Small icon+label tiles (trust badges, device cards) stay readable
	   two-up on phones; grids opt in with this modifier. Declared after the
	   single-column rule above so it wins on elements carrying both classes. */
	.oi-grid--compact-mobile { grid-template-columns: repeat(2, 1fr); }
}