/*
 * Shell base: element defaults, design tokens and buttons.
 *
 * Copied VERBATIM from the design source, in source order, with every media
 * context preserved. Slice 1's rule is fidelity before refactoring, so the
 * accretion is preserved on purpose -- including the three :root blocks and
 * the repeated body/heading rules. Cascade order is what makes the rendered
 * result correct, and reordering it "tidily" would change the design.
 *
 * The measured winners are recorded in docs/implementation-architecture.md.
 * Do not consolidate any of this until screenshot parity says it is safe.
 *
 * Source: assets/css/style.css @ sha256:60c74b97...a206
 */

:root {
	/* Poudarek je iz znamkovnega gradienta #00C2FF -> #4285F4 -> #5072F0.
	Turkizna ima na temni podlagi razmerje 7,8:1, na beli pa le 2,5:1,
	zato besedilo na svetli podlagi uporablja modro (4,97:1). */
	--accent: #00C2FF;
	--accent-ink: #3367D6;
	--accent-rgb: 0, 194, 255;
	--primary: var(--blue);
	--blue: #4285F4;
	--blue-dark: #3367D6;
	--cyan: #00C2FF;
	--indigo: #5072F0;
	--navy: #071226;
	--ink: #101827;
	--muted: #64748b;
	--line: #e8eef6;
	--soft: #f5f8fc;
	--white: #fff;
	--gradient: linear-gradient(135deg, #00C2FF 0%, #4285F4 50%, #5072F0 100%);
	--gradient-ink: linear-gradient(135deg, #0092C9 0%, #4285F4 45%, #5072F0 100%);
	--shadow: 0 24px 70px rgba(15, 23, 42, .13);
	--radius: 32px;
}
* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	color: var(--ink);
	background: var(--white);
	font-family: "Google Sans", Inter, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
a {
	color: inherit; text-decoration: none;
}
img {
	display: block; max-width: 100%;
}
button, input, textarea {
	font: inherit;
}
button {
	cursor: pointer;
}
h1, h2, h3, h4 {
	margin-top: 0;
	font-family: "Google Sans", Inter, sans-serif;
	font-weight: 900;
	letter-spacing: -0.0158em;
}
h1 {
	font-size: clamp(42px, 6vw, 82px); line-height: .98;
}
h2 {
	font-size: clamp(32px, 4.5vw, 58px); line-height: 1.02;
}
h3 {
	font-size: 21px;
}
p {
	line-height: 1.75;
}
.btn {
	display: inline-flex;
	min-height: 54px;
	padding: 0 27px;
	align-items: center;
	justify-content: center;
	gap: 12px;
	border: 0;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .005em;
	text-transform: none;
	transition: transform .25s, box-shadow .25s, background .25s;
}
.btn:hover {
	transform: translateY(-2px);
}
.btn-primary {
	color: var(--white); background: var(--gradient); box-shadow: 0 16px 36px rgba(66, 133, 244, .27);
}
.btn-dark {
	color: var(--white); background: var(--navy);
}
.btn-light {
	color: var(--navy); background: var(--white);
}
.btn-outline {
	color: var(--white); border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.18);
}
@media (max-width: 680px) {
	.hero-actions .btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important;
	}
}

:root {
	--blue: #4285F4;
	--blue-dark: #3367D6;
	--cyan: #00C2FF;
	--sky: #4285F4;
	--indigo: #5072F0;
	--navy: #050d1f;
	--ink: #0b1428;
	--muted: #66738a;
	--line: #e4eaf4;
	--soft: #f4f7fb;
	--gradient: linear-gradient(135deg, #00C2FF 0%, #4285F4 50%, #5072F0 100%);
	--gradient-ink: linear-gradient(135deg, #0092C9 0%, #4285F4 45%, #5072F0 100%);
	--shadow: 0 28px 80px rgba(11, 20, 40, .14);
}
::selection {
	color: #fff; background: var(--blue);
}
body {
	overflow-x: hidden;
	background:
	radial-gradient(circle at 15% 12%, rgba(40, 117, 255, .055), transparent 24rem),
	#fff;
}
a, button {
	-webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 3px solid rgba(0, 194, 232, .5);
	outline-offset: 4px;
}
h1, h2 {
	text-wrap: balance;
}
h2 {
	letter-spacing: -0.0248em;
}
.btn {
	position: relative;
	min-height: 58px;
	padding-inline: 31px;
	overflow: hidden;
	letter-spacing: .005em;
}
.btn::after {
	position: absolute;
	top: -100%;
	left: -45%;
	width: 34%;
	height: 300%;
	content: "";
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
	transform: rotate(24deg);
	transition: left .55s ease;
}
.btn:hover::after {
	left: 115%;
}
body {
	background:
	radial-gradient(circle at 12% 4%, rgba(55, 105, 255, .07), transparent 26rem),
	radial-gradient(circle at 96% 34%, rgba(0, 194, 232, .045), transparent 30rem),
	#fff;
}
.cta-band .cta-actions .btn {
	margin: 0;
}
@media (max-width: 680px) {
	.reference-note .btn {
		width: 100%;
	}
}

:root {
	--radius: 24px;
	--line: #e3e9f2;
	--soft: #f6f8fb;
	--shadow: 0 22px 60px rgba(8, 24, 52, .1);
}
body {
	background: #fff;
}
h1,
h2,
h3,
h4 {
	letter-spacing: -0.018em;
}
.btn {
	min-height: 56px;
	border-radius: 12px;
	letter-spacing: .12em;
}
.btn-primary {
	background: var(--gradient);
	box-shadow: 0 14px 30px rgba(66, 133, 244, .3);
}
.btn-dark {
	background: #071226;
}
html,
body {
	max-width: 100%;
	overflow-x: clip;
}
.page-hero .btn-outline {
	color: #fff;
	border-color: rgba(255, 255, 255, .5);
	background: rgba(255, 255, 255, .18);
}
.problem-answer .btn-dark {
	/*
	 * SHRINK IS ALLOWED, AND THE WIDTH IS CAPPED. `flex: 0 0 auto` pinned this
	 * button to its max-content width -- 344px, because the label is long and
	 * `.btn` tracks at .12em -- so on a narrow phone it was wider than the
	 * card's content box and ran past both the card and the viewport edge.
	 *
	 * A page-level overflow check could not see it: an ancestor clips with
	 * `overflow-x: clip`, so `scrollWidth` stayed equal to `clientWidth` while
	 * the button was visibly cut off. A physical phone found it; 390px
	 * emulation did not, which is why the QA floor is now 320px.
	 *
	 * `0 1 auto` lets the flex item shrink and `max-width` stops it exceeding
	 * the card, so the label wraps on very narrow devices instead of
	 * overflowing. Nothing changes at widths where it already fit.
	 */
	flex: 0 1 auto;
	max-width: 100%;
	color: var(--navy);
	background: #fff;
}
.btn-primary {
	color: var(--white);
	background: var(--gradient);
	box-shadow: 0 14px 32px rgba(66, 133, 244, .3);
}
.btn-primary:hover {
	box-shadow: 0 18px 40px rgba(66, 133, 244, .42);
}
/*
 * `.consent-actions .btn` and its 560px rule stood here, transcribed from the
 * source in Slice 1. REMOVED in Slice 12, when the consent capability was
 * built: `.consent-actions` is the design source's OWN consent banner, and
 * this project does not build one. The runtime that drew it -- its markup,
 * its localStorage key, its Consent Mode calls -- is discarded in favour of
 * Complianz Free, which renders its own banner with its own classes.
 *
 * The two measurements the rules carried are not lost. They are re-declared
 * against the provider's buttons in assets/css/consent.css, applied to all
 * four of them rather than to a selector nothing matches.
 */

a.rating,
.btn,
.eyebrow,
.card-label {
	font-family: "Google Sans", Inter, system-ui, sans-serif;
}