/*
	DigitalKanera studio restyle — sits on Story (HTML5 UP).
	Cool-electric cyber: ink/navy base, cyan fiber, restrained gold.
	Motion lives in cyber.css (imported first; tokens resolve at computed time).
*/

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600&family=Syne:wght@600;700&display=swap");
@import url("cyber.css");

:root {
	--ink: #0b0f14;
	--navy: #111820;
	--panel: #141c26;
	--panel-2: #1a2330;
	--ice: #e8f4f6;
	--ice-dim: #9bb4bb;
	--muted: #6d7e86;
	--fiber: #4ae8f0;
	--fiber-core: #f2ffff;
	--fiber-deep: #1ad4de;
	--gold: #d4a05a;
	--gold-deep: #c4924a;
	--line: rgba(74, 232, 240, 0.12);
	--line-strong: rgba(74, 232, 240, 0.32);
	--phone-bezel-t: 2.5rem;
	--phone-bezel-b: 3rem;
}

html {
	color-scheme: dark;
}

body {
	background: var(--ink);
	color: var(--ice-dim);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Helvetica, Arial, sans-serif;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.6;
}

body, input, select, textarea {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: var(--ice-dim);
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	font-weight: 500;
	letter-spacing: -0.025em;
	color: var(--ice);
	line-height: 1.15;
}

h1 {
	font-size: 3.15rem;
	margin-bottom: 1.1rem;
}

h1.wordmark {
	font-family: "Syne", "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--ice);
}

h2 {
	font-size: 2.05rem;
}

p {
	margin: 0 0 1.35rem 0;
}

p.major {
	font-size: 1.15rem;
	color: var(--ice-dim);
	max-width: 28rem;
}

a {
	color: var(--gold);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

a:hover {
	color: var(--ice);
	text-decoration: none;
	border-bottom-color: var(--line-strong);
}

strong, b {
	font-weight: 600;
	color: var(--ice);
}

#wrapper {
	background: var(--ink);
}

#wrapper.divided > * {
	box-shadow: inset 0 1px 0 var(--line);
}

#wrapper.divided > *:first-child {
	box-shadow: none;
}

.banner,
.spotlight,
.wrapper,
footer.wrapper {
	background-color: var(--ink);
	color: var(--ice-dim);
}

.banner.style1.fullscreen {
	min-height: 88vh;
}

.banner.style1 .image {
	position: relative;
}

.banner .content,
.spotlight .content {
	max-width: 36rem;
}

/*
	Dark smoked-glass rack hero: centered lockup over an ink/navy hall.
	Desktop and mobile share one overlay; only the viewport height changes.
	No global fog. Type sits on a thin ink scrim; racks stay visible.
*/
.banner.style1.hero.title-card,
.banner.style1.hero.title-card.orient-left,
.banner.style1.hero.title-card.orient-right {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(22rem, 88vh);
	align-items: stretch;
	justify-content: stretch;
	min-height: 88vh;
	text-align: center;
	overflow: hidden;
	background-color: var(--ink);
	color: var(--ice);
}

.banner.style1.hero.title-card.fullscreen {
	min-height: 88vh;
}

.banner.style1.hero.title-card .image,
.banner.style1.hero.title-card.fullscreen .image {
	grid-area: 1 / 1;
	position: relative;
	width: 100%;
	max-width: 100%;
	height: 100%;
	min-height: 0;
	overflow: hidden;
	z-index: 1;
	flex-grow: 0;
	flex-shrink: 0;
}

.banner.style1.hero.title-card .image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	background: var(--ink);
	filter: saturate(1.06) brightness(0.96);
}

/* Side-weighted rack-light pulse. Center aisle stays dark for type. */
.banner.style1.hero.title-card .image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(74, 232, 240, 0.08) 0%, transparent 20%, transparent 80%, rgba(212, 160, 90, 0.06) 100%),
		linear-gradient(90deg, rgba(90, 180, 110, 0.04) 0%, transparent 16%, transparent 84%, rgba(74, 232, 240, 0.05) 100%);
	mix-blend-mode: screen;
	animation: rack-light-pulse 8.5s ease-in-out infinite;
}

.banner.style1.hero.title-card .hero-fiber {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	pointer-events: none;
	overflow: visible;
}

.banner.style1.hero.title-card .hero-fiber .ribbon {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.banner.style1.hero.title-card .hero-fiber .r1 {
	stroke: rgba(74, 232, 240, 0.28);
	stroke-width: 11;
	animation: hero-fiber-breathe 11s ease-in-out infinite;
}

.banner.style1.hero.title-card .hero-fiber .r2 {
	stroke: rgba(74, 232, 240, 0.16);
	stroke-width: 5;
	animation: hero-fiber-breathe 11s ease-in-out infinite;
	animation-delay: -4s;
}

.banner.style1.hero.title-card .hero-fiber .r-spark {
	stroke: rgba(242, 255, 255, 0.28);
	stroke-width: 1.1;
	stroke-dasharray: 3 28 1 42 2 36;
	animation: hero-sparkle 18s linear infinite;
}

.banner.style1.hero.title-card .hero-fiber .r-floor {
	stroke: rgba(74, 232, 240, 0.12);
	stroke-width: 8;
}

.banner.style1.hero.title-card .hero-fiber .ribbons {
	transform-box: fill-box;
	transform-origin: center;
	animation: hero-ribbon-sweep 22s ease-in-out infinite;
}

.banner.style1.hero.title-card .hero-fiber .ribbon-floor {
	opacity: 0.38;
	filter: blur(2px);
}

@keyframes hero-fiber-breathe {
	0%, 100% { stroke: rgba(74, 232, 240, 0.18); }
	50% { stroke: rgba(74, 232, 240, 0.34); }
}

@keyframes hero-ribbon-sweep {
	0%, 100% { transform: translateX(-2.4%); }
	50% { transform: translateX(2.4%); }
}

@keyframes hero-sparkle {
	to { stroke-dashoffset: -160; }
}

@keyframes rack-light-pulse {
	0%, 100% { opacity: 0.22; }
	50% { opacity: 0.52; }
}

.banner.style1.hero.title-card .content,
.banner.style1.hero.title-card.fullscreen .content,
body.is-preload .banner.style1.hero.title-card .content {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-self: stretch;
	width: 100%;
	max-width: 100%;
	min-height: 0;
	height: 100%;
	margin: 0;
	padding: 5.5rem 1.5rem 3.5rem;
	text-align: center;
	z-index: 4;
	transform: none;
	opacity: 1;
	background: radial-gradient(ellipse 22rem 8.2rem at 50% 48%, rgba(11, 15, 20, 0.78) 0%, rgba(11, 15, 20, 0.38) 48%, transparent 74%);
}

.banner.style1.hero.title-card .content p.major {
	margin-left: auto;
	margin-right: auto;
	max-width: 28rem;
	color: var(--ice);
}

.banner.style1.hero.title-card .wordmark {
	color: var(--ice);
	font-size: clamp(2.2rem, 6.4vw, 4.15rem);
	letter-spacing: -0.045em;
	animation: none;
	text-shadow:
		0 1px 1px rgba(11, 15, 20, 0.92),
		0 2px 22px rgba(11, 15, 20, 0.7);
}

.banner.style1.hero.title-card .lede {
	color: var(--ice);
	text-shadow:
		0 1px 12px rgba(11, 15, 20, 0.9),
		0 0 24px rgba(11, 15, 20, 0.55);
}

/* Soft step from the ink hall into the navy app rows. */
.banner.style1.hero.title-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5.5rem;
	z-index: 5;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(11, 15, 20, 0) 0%, var(--ink) 100%);
	opacity: 1;
	animation: none;
}

.eyebrow {
	display: inline-block;
	position: relative;
	margin: 0 0 0.85rem 0;
	padding: 0.2rem 0.65rem;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	color: var(--fiber);
	font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wordmark {
	margin-bottom: 0.35rem;
}

.hero-x {
	margin: 0.15rem 0 0.9rem 0;
	line-height: 0;
}

.hero-x a {
	display: inline-flex;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 2.15rem;
	height: 2.15rem;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	color: var(--fiber);
	border-bottom: none;
}

.hero-x a:hover {
	color: var(--ice);
	border-color: rgba(74, 232, 240, 0.55);
	border-bottom: none;
	background: rgba(74, 232, 240, 0.08);
}

.hero-x svg {
	display: block;
	width: 0.82rem;
	height: 0.82rem;
	fill: currentColor;
}

.lede {
	margin-bottom: 0;
}

.spotlight.style1,
.spotlight.style3 {
	background: var(--navy);
}

.spotlight.style1.alt,
.spotlight.style3.alt {
	background: var(--panel);
}

.spotlight.style1 .image {
	background-color: var(--panel-2);
}

.spotlight.style1 .image img,
.banner.style1 .image img {
	background: transparent;
}

.spotlight.style3 .image {
	--phone-bezel-t: 2.5rem;
	--phone-bezel-b: 3rem;
	--phone-radius: 1rem;
	--phone-w: 13rem;
	/* True iPhone still aspect (1320×2868), not Story’s 9:16. */
	--phone-screen-h: calc(var(--phone-w) * 2868 / 1320);
	--phone-screen-r: calc(var(--phone-w) * 6.9 / 90);
	position: relative;
	overflow: visible;
	/* flex-basis on column = height; keep grow/shrink 0, size via width+aspect. */
	flex: 0 0 auto;
	align-self: center;
	width: min(var(--phone-w), 100%);
	max-width: 100%;
	aspect-ratio: 1320 / 2868;
	height: auto;
	background-color: #000;
	border-width: 0;
	border-color: transparent;
	border-radius: var(--phone-screen-r);
}

/* Screenshot and fiber share the same padding box. Absolute so Story’s
   in-flow :before/:after bezels and the 1320px width attr cannot inflate
   the flex item on a wide window. */
.spotlight.style3 .image img {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: top center;
	background: #000;
	/* Same corner as svg.fiber rx 6.9 on a 90×160 viewBox. */
	border-radius: var(--phone-screen-r);
	filter: none;
	image-rendering: auto;
}

/* Larger desktop/tablet-landscape frames so 1320px shots are not crushed
   into Story’s 13rem toy size. Height follows aspect-ratio from --phone-w.
   ≤980px stays on Story’s 11.375rem / 8.125rem so phones stay as they are. */
@media screen and (min-width: 981px) {
	.spotlight.style3 .image {
		--phone-w: 18.5rem;
	}

	.spotlight.style3 .image img {
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
}

@media screen and (min-width: 1681px) {
	.spotlight.style3 .image {
		--phone-w: 20rem;
	}
}

/* Earpiece / home stay; the SVG fiber is the only cyan outline. */
.spotlight.style3 .image:before,
.spotlight.style3 .image:after {
	border-color: transparent;
}

.spotlight.style3 .image:before {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'%3E%3Crect rx='4' ry='4' x='11' y='12' width='42' height='8' fill='none' stroke='%234ae8f0' stroke-opacity='0.5' stroke-width='1'/%3E%3C/svg%3E");
}

.spotlight.style3 .image:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'%3E%3Ccircle cx='32' cy='16' r='14' fill='none' stroke='%234ae8f0' stroke-opacity='0.5' stroke-width='1'/%3E%3C/svg%3E");
}

@media screen and (max-width: 980px) {
	.spotlight.style3 .image {
		--phone-bezel-t: 2.1875rem;
		--phone-bezel-b: 2.625rem;
		--phone-radius: 0.875rem;
		--phone-w: 11.375rem;
	}
}

@media screen and (max-width: 736px) {
	.spotlight.style3 .image {
		--phone-bezel-t: 1.5625rem;
		--phone-bezel-b: 1.875rem;
		--phone-radius: 0.625rem;
		--phone-w: 8.125rem;
	}
}

@media screen and (max-width: 736px) and (orientation: portrait) {
	.spotlight.style1 .image {
		min-height: 16rem;
	}

	.spotlight.style1 .image img {
		position: absolute;
		height: 16rem;
	}
}

.store-cta {
	display: flex;
	align-items: center;
	margin: 0 0 1.35rem 0;
	min-height: 40px;
}

a.store-badge {
	display: inline-block;
	line-height: 0;
	border-bottom: none;
}

a.store-badge:hover {
	border-bottom: none;
	opacity: 0.88;
}

a.store-badge img {
	display: block;
	width: 120px;
	height: 40px;
	background: transparent;
}

.store-soon {
	display: inline-flex;
	position: relative;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 120px;
	height: 40px;
	padding: 0 1rem;
	border: 1px solid rgba(74, 232, 240, 0.45);
	border-radius: 8px;
	background: #000;
	color: var(--ice);
	font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	font-size: 0.7rem;
	font-weight: 650;
	letter-spacing: 0.06em;
	line-height: 1;
	white-space: nowrap;
	text-transform: uppercase;
	pointer-events: none;
	user-select: none;
}

.spotlight.style3 .links {
	margin-top: 0.35rem;
}

.links {
	list-style: none;
	margin: 1.5rem 0 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem 1.25rem;
}

.links li {
	padding: 0;
	list-style: none;
}

.links a {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--ice);
	border-bottom: 1px solid var(--line-strong);
}

.links a:hover {
	color: var(--gold);
}

.wrapper.attention {
	background: var(--ink);
	text-align: left;
}

.wrapper.attention .inner {
	max-width: 38rem;
	margin: 0 auto;
	text-align: left;
}

.wrapper.attention h2 {
	margin-bottom: 1rem;
}

.wrapper.attention p {
	color: var(--ice-dim);
}

.x-link {
	display: inline-block;
	margin-top: 0.25rem;
	color: var(--gold);
	font-weight: 500;
}

.wrapper.x-door {
	background: var(--ink);
	text-align: left;
}

.wrapper.x-door .inner {
	max-width: 28rem;
	margin: 0 auto;
	text-align: left;
}

.wrapper.x-door .wordmark a {
	color: var(--ice);
	border-bottom: none;
}

.wrapper.x-door .wordmark a:hover {
	color: var(--ice);
	border-bottom-color: transparent;
}

.wrapper.x-door .lede {
	margin-bottom: 0.85rem;
}

.wrapper.x-door .handle {
	margin: 0 0 1.5rem 0;
	color: var(--ice);
	font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	font-weight: 500;
	letter-spacing: -0.02em;
}


.wrapper.x-feed {
	background: var(--ink);
	padding-top: 0;
}

.wrapper.x-feed .inner {
	max-width: 42rem;
	margin: 0 auto;
	min-height: 80vh;
}

footer.site-footer {
	background: #090c10;
	color: var(--muted);
	text-align: left;
}

footer.site-footer .inner {
	max-width: 48rem;
	margin: 0 auto;
	text-align: left;
}

footer.site-footer p {
	margin: 0 0 0.65rem 0;
	font-size: 0.9rem;
}

footer.site-footer .credit {
	margin-top: 1.25rem;
	font-size: 0.8rem;
	color: var(--muted);
}

ul.icons {
	display: none;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
	background: transparent !important;
	box-shadow: inset 0 0 0 1px var(--line-strong) !important;
	color: var(--ice) !important;
	border-radius: 999px !important;
	font-family: inherit !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
	background: var(--fiber) !important;
	box-shadow: inset 0 0 0 1px var(--fiber) !important;
	color: var(--ink) !important;
}

@media screen and (max-width: 736px) {
	h1 {
		font-size: 2.35rem;
	}

	h2 {
		font-size: 1.7rem;
	}

	.wrapper.attention,
	footer.site-footer {
		text-align: left;
	}
}

@media screen and (max-width: 736px), screen and (max-width: 1280px) and (orientation: portrait) {
	.banner.style1.hero.title-card,
	.banner.style1.hero.title-card.orient-left,
	.banner.style1.hero.title-card.orient-right {
		grid-template-rows: minmax(21rem, min(52vh, 100vw));
		min-height: 0;
	}

	.banner.style1.hero.title-card.fullscreen {
		min-height: 0;
	}

	.banner.style1.hero.title-card .content,
	.banner.style1.hero.title-card.fullscreen .content,
	body.is-preload .banner.style1.hero.title-card .content {
		padding: 4.25rem 1.25rem 1.85rem;
		background: radial-gradient(ellipse 18rem 7.4rem at 50% 48%, rgba(11, 15, 20, 0.84) 0%, rgba(11, 15, 20, 0.42) 50%, transparent 76%);
	}

	.banner.style1.hero.title-card::after {
		height: 3.25rem;
	}
}

@media screen and (max-height: 540px) {
	.banner.style1.hero.title-card.fullscreen {
		min-height: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.banner.style1.hero.title-card .wordmark {
		letter-spacing: -0.045em;
		text-shadow:
			0 1px 1px rgba(11, 15, 20, 0.92),
			0 2px 22px rgba(11, 15, 20, 0.7);
	}

	.banner.style1.hero.title-card .hero-fiber .ribbons,
	.banner.style1.hero.title-card .hero-fiber .ribbon,
	.banner.style1.hero.title-card .image::after {
		animation: none;
	}

	.banner.style1.hero.title-card .image::after {
		opacity: 0.28;
	}
}


/* product pages + homepage CTAs */

.store-cta-stack {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
	min-height: 0;
}

a.store-price {
	display: inline-block;
	color: var(--ice);
	font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	border-bottom: 1px solid var(--line-strong);
	line-height: 1.35;
}

a.store-price:hover {
	color: var(--fiber);
	border-bottom-color: var(--fiber);
}

.wrapper.buy-once {
	background: var(--navy);
	padding-top: 2.25rem;
	padding-bottom: 2.25rem;
}

.wrapper.buy-once .inner {
	max-width: 38rem;
	margin: 0 auto;
}

.wrapper.buy-once .buy-once-lede {
	margin: 0 0 0.45rem 0;
	color: var(--ice);
	font-size: 1.05rem;
}

.wrapper.buy-once .buy-once-refuse {
	margin: 0;
	color: var(--muted);
	font-size: 0.95rem;
}

footer.site-footer .trust-line {
	color: var(--ice-dim);
	font-weight: 500;
}

/* Thin product top bar */
.wrapper.product-top {
	background: var(--ink);
	padding-top: 1.35rem;
	padding-bottom: 0.85rem;
}

.wrapper.product-top .inner {
	max-width: 48rem;
	margin: 0 auto;
}

.product-crumb {
	margin: 0;
	font-size: 0.92rem;
	color: var(--muted);
}

.product-crumb a {
	color: var(--ice);
	border-bottom: 1px solid transparent;
}

.product-crumb a:hover {
	color: var(--gold);
	border-bottom-color: var(--line-strong);
}

.product-crumb .sep {
	margin: 0 0.45rem;
	color: var(--muted);
	opacity: 0.7;
}

/* Product hero reuses spotlight.iphone */
.spotlight.product-hero .content h1 {
	font-size: 2.35rem;
	margin-bottom: 0.85rem;
}

.spotlight.product-hero .pitch {
	margin-bottom: 1.35rem;
	color: var(--ice-dim);
	font-size: 1.08rem;
	max-width: 28rem;
}

.store-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 0.85rem;
	margin: 0 0 1.35rem 0;
}

.review-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 40px;
	padding: 0 1rem;
	border: 1px solid rgba(212, 160, 90, 0.4);
	border-radius: 8px;
	background: transparent;
	color: var(--gold);
	font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	font-size: 0.7rem;
	font-weight: 650;
	letter-spacing: 0.06em;
	line-height: 1;
	white-space: nowrap;
	text-transform: uppercase;
	pointer-events: none;
	user-select: none;
}

/* Product three-step strip — phones must stay centered on mobile.
   Story sets .wrapper.style1 > .inner { width: 64rem; max-width: 100% }.
   The phone strip's min-content width inflates the section, so 100% becomes
   ~64rem and a "centered" grid paints off-screen to the right under
   #wrapper { overflow-x: hidden }. Pin inner to the viewport. */
.wrapper.tip-steps {
	background: var(--navy);
	overflow-x: clip;
	max-width: 100%;
}

.wrapper.tip-steps > .inner {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: auto;
	margin-right: auto;
	overflow-x: clip;
	box-sizing: border-box;
}

.wrapper.tip-steps h2 {
	margin-bottom: 1.5rem;
	font-size: 1.55rem;
	text-align: left;
}

.tip-step-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 1.75rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.tip-step-grid li {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
	flex: 0 1 11.5rem;
	width: 11.5rem;
	max-width: 100%;
	box-sizing: border-box;
}

.tip-step-grid .step-phone {
	--phone-w: 11.5rem;
	--phone-screen-h: calc(var(--phone-w) * 2868 / 1320);
	--phone-screen-r: calc(var(--phone-w) * 6.9 / 90);
	position: relative;
	display: block;
	width: var(--phone-w);
	max-width: 100%;
	height: auto;
	margin: 0 auto 0.95rem;
	background-color: #000;
	border-radius: var(--phone-screen-r);
	overflow: hidden;
	box-sizing: border-box;
}

/* In-flow img sets the phone height; fiber SVG overlays. Absolute-only
   children were collapsing the box on mobile Safari and painting 1320px-wide. */
.tip-step-grid .step-phone img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	aspect-ratio: 1320 / 2868;
	object-fit: cover;
	object-position: top center;
	background: #000;
	border-radius: var(--phone-screen-r);
}

.tip-step-grid .step-phone > svg.fiber {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	overflow: visible;
	pointer-events: none;
	z-index: 3;
}

.tip-step-grid .step-phone > svg.fiber rect {
	fill: none;
	vector-effect: non-scaling-stroke;
}

.tip-step-grid li:nth-child(1) .fiber-glow,
.tip-step-grid li:nth-child(1) .fiber-core {
	animation-duration: 7.2s;
}

.tip-step-grid li:nth-child(2) .fiber-glow,
.tip-step-grid li:nth-child(2) .fiber-core {
	animation-duration: 8.5s;
	animation-delay: -3.1s;
}

.tip-step-grid li:nth-child(3) .fiber-glow,
.tip-step-grid li:nth-child(3) .fiber-core {
	animation-duration: 6.7s;
	animation-delay: -5.4s;
}

.tip-step-grid .step-cap {
	margin: 0;
	color: var(--ice);
	font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	font-size: 0.98rem;
	font-weight: 500;
}

.tip-step-grid .step-num {
	display: block;
	margin-bottom: 0.2rem;
	color: var(--muted);
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Keep product page Story inners on the viewport (same 64rem trap). */
.wrapper.product-top > .inner,
.wrapper.product-facts > .inner,
.wrapper.product-trust > .inner,
.wrapper.tip-steps > .inner {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

/* Bullets + trust */
.wrapper.product-facts,
.wrapper.product-trust {
	background: var(--ink);
}

.wrapper.product-facts .inner,
.wrapper.product-trust .inner {
	max-width: 38rem;
	margin: 0 auto;
}

.wrapper.product-facts h2,
.wrapper.product-trust h2 {
	margin-bottom: 1rem;
	font-size: 1.55rem;
}

.product-bullets {
	margin: 0;
	padding: 0 0 0 1.15rem;
	color: var(--ice-dim);
}

.product-bullets li {
	margin: 0 0 0.75rem 0;
	padding-left: 0.15rem;
}

.product-bullets li:last-child {
	margin-bottom: 0;
}

.wrapper.product-trust .trust-line {
	margin: 0 0 1rem 0;
	color: var(--ice);
	font-size: 1.05rem;
	font-weight: 500;
}

.wrapper.product-trust .links {
	margin-top: 0.25rem;
}

@media screen and (max-width: 980px) {
	.tip-step-grid {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-start;
		gap: 1.75rem;
		width: 100%;
		max-width: 100%;
		margin: 0;
	}

	.tip-step-grid li {
		flex: 0 0 auto;
		width: min(12.5rem, 72vw);
		max-width: 12.5rem;
	}

	.tip-step-grid .step-phone {
		--phone-w: min(12.5rem, 72vw);
		width: 100%;
		height: auto;
		aspect-ratio: 1320 / 2868;
	}

	.spotlight.product-hero .content h1 {
		font-size: 2rem;
	}
}

@media screen and (max-width: 736px) {
	.tip-step-grid li {
		width: min(10.5rem, 70vw);
		max-width: 10.5rem;
	}

	.tip-step-grid .step-phone {
		--phone-w: min(10.5rem, 70vw);
	}
}