/* Centered product pages with layered screenshots and a generous feature grid. */
.browser-product .product-hero,
.native-product .product-hero,
.workspace-product .product-hero {
	display: block;
	width: 100%;
	max-width: none;
	padding: 80px 24px 56px;
}
.product-hero .browser-hero-inner {
	display: block;
	max-width: 1180px;
	margin: auto;
}
.product-hero .product-hero-copy {
	max-width: 920px;
	padding: 0;
	margin: 0 auto;
	text-align: center;
	display: block;
}
.product-hero .product-hero-mark {
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto 28px;
}
.native-product .product-hero .product-hero-mark {
	width: 96px;
}
.product-hero-mark img,
.product-hero-mark svg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.product-hero .product-hero-copy h1 {
	max-width: 900px;
	margin: 0 auto;
	font-size: clamp(42px, 4.3vw, 64px);
	line-height: 1.13;
	letter-spacing: -0.035em;
	font-weight: 600;
}
.product-hero .product-hero-copy :is(.browser-intro, .np-lead, .wp-lead) {
	max-width: 700px;
	font-size: 20px;
	line-height: 1.65;
	margin: 28px auto 0 !important;
}
.product-hero :is(.browser-actions, .np-actions, .wp-actions) {
	justify-content: center;
	gap: 20px 30px;
	margin: 32px 0 0;
}
.product-hero :is(.browser-small, .np-small, .wp-note) {
	margin: 20px auto 0 !important;
}
.product-hero .product-hero-visual {
	display: block;
	position: relative;
	isolation: isolate;
	max-width: 1180px;
	width: 100%;
	margin: 88px auto 0;
	padding: 28px 64px 56px;
}
.product-hero .browser-screen {
	border-width: 2px;
	border-radius: 16px;
	box-shadow: 0 22px 55px #20305217;
}
.product-hero .np-device--hero {
	width: 100%;
	margin: 0 auto;
}
.native-product--phone .product-hero .product-hero-visual {
	max-width: 700px;
	padding-inline: 185px;
}
.native-product--phone .product-hero .np-device--hero {
	width: 100%;
	max-width: none;
}
.product-hero .wp-product-label {
	display: block;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	color: #1967d2;
	margin-bottom: 20px !important;
}
.workspace-product .product-hero {
	background: linear-gradient(180deg, #eef4fe, #fff 80%);
}
.product-hero .wp-hero-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	min-height: 0;
	padding: 28px 32px 60px;
	background: transparent;
}
.product-hero .wp-hero-stage img {
	max-width: 300px;
	width: 38%;
	transform: translate(10px, -8px) rotate(-4deg);
	position: relative;
	z-index: 1;
}
.product-hero .wp-hero-stage .wp-translate-shot {
	width: 35%;
	max-width: 276px;
	margin-left: -28px;
	transform: translateY(44px) rotate(5deg);
	z-index: 2;
}
.browser-product--chrome .product-hero {
	background: linear-gradient(180deg, #eef4ff, #fff 80%);
}
.browser-product--firefox .product-hero .product-hero-copy h1 {
	font-size: clamp(48px, 5vw, 72px);
}
.native-product .product-hero {
	background: linear-gradient(180deg, #f0ebf7, #fbfaf8 85%);
}
.safari-product .product-hero {
	background: linear-gradient(180deg, #e6f2fb, #fbfaf8 85%);
}
.product-hero .np-bundle-note {
	margin-top: 18px;
}

/* The original Mac composition: a calm backdrop, orbit lines, and floating
   labels. Only the artwork overlaps; the copy and actions keep their space. */
.product-hero {
	--scene-tint: #eee5f7;
	--scene-line: #d3c0e3;
	--scene-read-bg: #e7eddb;
	--scene-read-ink: #284b39;
	--scene-write-bg: #ffe3af;
	--scene-write-ink: #633d14;
}
.browser-product--chrome .product-hero,
.workspace-product .product-hero {
	--scene-tint: #e8f0fe;
	--scene-line: #bfd1ee;
	--scene-read-bg: #e2efdf;
	--scene-read-ink: #254d35;
	--scene-write-bg: #fff0bf;
	--scene-write-ink: #634813;
}
.browser-product--edge .product-hero {
	--scene-tint: #ddf1ee;
	--scene-line: #acd5d5;
	--scene-read-bg: #d9efee;
	--scene-read-ink: #17515b;
	--scene-write-bg: #e4edff;
	--scene-write-ink: #284779;
}
.browser-product--firefox .product-hero {
	--scene-tint: #f1e5fa;
	--scene-line: #ddbad9;
	--scene-read-bg: #ffe2cc;
	--scene-read-ink: #703813;
	--scene-write-bg: #e7ddff;
	--scene-write-ink: #492970;
}
.safari-product .product-hero {
	--scene-tint: #e3f0fb;
	--scene-line: #b7d7ec;
	--scene-read-bg: #deeffa;
	--scene-read-ink: #245477;
	--scene-write-bg: #e1f1ea;
	--scene-write-ink: #2f5846;
}
.product-hero-visual::before {
	content: '';
	position: absolute;
	inset: 12% 20px 4%;
	background: var(--scene-tint);
	border-radius: 52px;
	transform: rotate(2deg);
	z-index: -2;
	pointer-events: none;
}
.product-hero .product-orbit {
	position: absolute;
	border: 1px solid var(--scene-line);
	border-radius: 50%;
	pointer-events: none;
	z-index: -1;
}
.product-orbit--one {
	inset: -3% -4% 5%;
	transform: rotate(-9deg);
}
.product-orbit--two {
	inset: -8% 5% 0;
	transform: rotate(10deg);
}
.product-hero-visual > :is(.browser-screen, .np-device) {
	position: relative;
	z-index: 1;
	transform: rotate(-1deg);
	box-shadow:
		0 32px 65px -22px #3524464d,
		0 2px 8px #3524460d;
}
.product-hero .product-float {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 22px;
	border: 1px solid #ffffffb3;
	border-radius: 18px;
	box-shadow: 0 12px 30px #3524461a;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	pointer-events: none;
}
.product-float > span {
	font-size: 20px;
}
.product-hero .product-float--reading {
	left: -8px;
	top: 18%;
	transform: rotate(-6deg);
	background: var(--scene-read-bg);
	color: var(--scene-read-ink);
}
.product-hero .product-float--writing {
	right: -8px;
	bottom: 26px;
	transform: rotate(5deg);
	background: var(--scene-write-bg);
	color: var(--scene-write-ink);
}
.native-product--phone .product-float--reading {
	left: 0;
	top: 24%;
}
.native-product--phone .product-float--writing {
	right: 0;
	bottom: 20%;
}
.product-hero .browser-screen-caption,
.product-hero .wp-hero-tools > figcaption {
	position: relative;
	z-index: 1;
}
.product-hero .wp-hero-tools > figcaption {
	margin-top: 22px;
}

/* Keep a readable measure and visible breathing room between sections. */
.browser-product .browser-section {
	padding-top: 112px;
	padding-bottom: 112px;
}
.browser-product .browser-section-heading {
	margin-bottom: 56px;
}
.browser-product .browser-reading-grid {
	gap: 32px;
}
.browser-product .browser-writing-tools {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 56px;
	margin-top: 48px;
}
.native-product .np-section {
	padding-top: 112px;
	padding-bottom: 112px;
}
.native-product .np-section-heading {
	margin-bottom: 56px;
}
.native-product .np-feature-row {
	gap: 40px;
}
.workspace-product .wp-feature {
	padding-top: 112px;
	padding-bottom: 112px;
}

.product-tools {
	--pt-ink: #20242d;
	--pt-muted: #535c68;
	--pt-accent: var(--browser-accent, var(--np-purple, #1967d2));
	max-width: 1280px;
	margin: 0 auto;
	padding: 104px 32px 112px;
	color: var(--pt-ink);
}
.product-tools *,
.product-tools *::before,
.product-tools *::after {
	box-sizing: border-box;
}
.product-tools .pt-heading {
	max-width: 720px;
	margin: 0 auto 56px;
	text-align: center;
}
.product-tools .pt-heading h2 {
	font-size: clamp(36px, 3.4vw, 50px);
	font-weight: 650;
	line-height: 1.15;
	letter-spacing: -0.035em;
	color: var(--pt-ink);
	margin: 0;
	text-wrap: balance;
}
.product-tools .pt-heading > p:last-child {
	font-size: 19px;
	line-height: 1.65;
	color: var(--pt-muted);
	margin: 24px auto 0;
	max-width: 650px;
}
.product-tools .pt-eyebrow {
	color: var(--pt-accent);
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 20px;
	letter-spacing: 0.02em;
}
.product-tools .pt-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 56px 36px;
}
.product-tools .pt-card {
	min-width: 0;
	border-radius: 30px;
	padding: 40px;
	overflow: visible;
	position: relative;
}
.product-tools .pt-voice,
.product-tools .pt-capture {
	display: grid;
	grid-template-columns: 1.12fr 0.88fr;
	gap: 24px;
	align-items: center;
}
.product-tools .pt-voice {
	background: #edf3fc;
}
.product-tools .pt-capture {
	background: #edf5f1;
}
.product-tools .pt-prediction {
	background: #f2edf9;
}
.product-tools .pt-discover {
	background: #f5f6f8;
}
.product-tools .pt-symbol {
	display: block;
	width: 36px;
	height: 36px;
	margin-bottom: 26px;
	color: var(--pt-accent);
}
.product-tools .pt-symbol svg {
	width: 100%;
	height: 100%;
}
.product-tools .pt-label {
	margin: 0 0 16px;
	color: var(--pt-accent);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}
.product-tools .pt-label > span {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	font-weight: 500;
	color: var(--pt-muted);
}
.product-tools .pt-card h3 {
	font-size: 31px;
	font-weight: 650;
	line-height: 1.17;
	letter-spacing: -0.03em;
	margin: 0;
	color: var(--pt-ink);
	text-wrap: balance;
}
.product-tools .pt-copy > p:not(.pt-label),
.product-tools .pt-discover > p:not(.pt-label) {
	font-size: 16px;
	line-height: 1.65;
	color: var(--pt-muted);
	margin: 18px 0 0;
}
.product-tools .pt-copy > a,
.product-tools .pt-browse {
	display: inline-block;
	padding: 5px 0;
	margin-top: 24px;
	font-size: 15px;
	line-height: 1.5;
	font-weight: 700;
	color: var(--pt-accent);
	text-decoration: none;
	text-underline-offset: 5px;
}
.product-tools a:hover {
	text-decoration: underline;
}
.product-tools a:focus-visible {
	outline: 3px solid var(--pt-accent);
	outline-offset: 5px;
	border-radius: 4px;
}
.product-tools figure {
	margin: 0;
}
.product-tools img {
	display: block;
	max-width: 100%;
	height: auto;
}
.product-tools .pt-control img {
	width: 100%;
	border: 1px solid #d8dde4;
	border-radius: 14px;
	box-shadow: 0 12px 26px #29334712;
}
.product-tools .pt-prediction {
	display: grid;
	grid-template-columns: 1.12fr 0.88fr;
	gap: 28px;
	align-items: center;
}
.product-tools .pt-prediction-shot img {
	width: 100%;
	border-radius: 16px;
	box-shadow: 0 12px 26px #2933471a;
}
.product-tools .pt-discover > p:not(.pt-label) {
	max-width: 410px;
}
.product-tools .pt-more-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	gap: 12px 20px;
	margin: 28px 0 0;
	padding: 0;
}
.product-tools .pt-more-links a {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	color: #394a62;
	font-size: 14px;
	line-height: 1.5;
	padding: 12px 0;
	border-bottom: 1px solid #d7dde6;
	text-decoration: none;
}
.product-tools .pt-caption {
	max-width: 640px;
	text-align: center;
	font-size: 13px;
	line-height: 1.6;
	color: var(--pt-muted);
	margin: 24px auto 0;
}
/* Let selected screenshots cross their card edge, with room reserved in the
   grid so they never collide with the next card or its copy. */
.product-tools :is(.pt-control, .pt-prediction-shot) {
	position: relative;
	isolation: isolate;
	margin-right: -54px;
	transform: translateY(18px) rotate(2deg);
}
.product-tools :is(.pt-control, .pt-prediction-shot)::before {
	content: '';
	position: absolute;
	inset: -8px;
	border: 1px solid #d8d4df;
	border-radius: 20px;
	background: #ffffffa6;
	transform: translate(-5px, 5px) rotate(-4deg);
	z-index: -1;
	pointer-events: none;
}
.product-tools .pt-capture .pt-control {
	transform: translateY(18px) rotate(-2deg);
}
.product-tools .pt-caption {
	margin-top: 42px;
}
@media (min-width: 1200px) {
	.native-product .np-notes-image {
		width: calc(100% + 92px);
		max-width: none;
		transform: rotate(2deg);
		box-shadow: 0 28px 55px -16px #2b3d1c40;
	}
	.native-product--phone .np-notes-image {
		width: 100%;
		max-width: 305px;
		transform: translate(32px, -24px) rotate(3deg);
	}
}
.np-extension .product-tools {
	padding: 88px 0 80px;
}
.np-extension .product-tools .pt-heading {
	max-width: 760px;
}
.np-extension .product-tools .pt-voice {
	background: #fff;
}
.np-extension .product-tools .pt-discover {
	background: #fff;
}
.workspace-product .product-tools {
	border-top: 1px solid #e8eaed;
}
@media (max-width: 1100px) {
	.product-tools .pt-voice,
	.product-tools .pt-capture,
	.product-tools .pt-prediction {
		grid-template-columns: 1fr;
		gap: 30px;
		align-content: start;
	}
	.product-tools .pt-control {
		max-width: 230px;
		margin: 0 auto -46px;
	}
	.product-tools .pt-prediction-shot {
		width: min(100%, 330px);
		margin: 0 auto -46px;
	}
	.product-tools .pt-more-links {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 760px) {
	.product-hero .product-float {
		font-size: 12px;
		gap: 8px;
		padding: 10px 13px;
		border-radius: 12px;
	}
	.product-float > span {
		font-size: 15px;
	}
	.product-hero .product-float--reading,
	.native-product--phone .product-float--reading {
		top: -12px;
		left: 0;
	}
	.product-hero .product-float--writing,
	.native-product--phone .product-float--writing {
		right: 0;
		bottom: 12px;
	}
	.product-hero-visual::before {
		inset: 10% 0 7%;
		border-radius: 28px;
	}
	.product-hero .product-orbit--two {
		inset: -3% 5% 2%;
	}
	.product-hero .browser-screen-caption,
	.product-hero .wp-hero-tools > figcaption {
		font-size: 12px;
	}
	.product-hero .wp-hero-stage .wp-translate-shot {
		margin-left: -12px;
		transform: translateY(24px) rotate(5deg);
	}
	.browser-product .product-hero,
	.native-product .product-hero,
	.workspace-product .product-hero {
		padding: 52px 24px 40px;
	}
	.product-hero .product-hero-mark {
		width: 52px;
		height: 52px;
		margin-bottom: 24px;
	}
	.product-hero .product-hero-copy h1 {
		font-size: 43px;
		line-height: 1.14;
	}
	.browser-product--firefox .product-hero .product-hero-copy h1 {
		font-size: 52px;
	}
	.product-hero .product-hero-copy :is(.browser-intro, .np-lead, .wp-lead) {
		font-size: 18px;
		line-height: 1.65;
		margin-top: 25px !important;
	}
	.product-hero :is(.browser-actions, .np-actions, .wp-actions) {
		gap: 18px 24px;
		margin-top: 28px;
	}
	.product-hero .product-hero-visual {
		margin-top: 72px;
		padding: 30px 10px 60px;
	}
	.native-product--phone .product-hero .product-hero-visual {
		max-width: 320px;
		padding-inline: 18px;
	}
	.product-hero .wp-hero-stage {
		gap: 0;
		padding: 20px 0 36px;
		border-radius: 24px;
	}
	.product-hero .wp-hero-stage img {
		width: 47%;
	}
	.product-hero .wp-hero-stage .wp-translate-shot {
		width: 43%;
	}
	.browser-product .browser-section,
	.native-product .np-section,
	.workspace-product .wp-feature {
		padding-top: 76px;
		padding-bottom: 76px;
	}
	.browser-product .browser-section-heading,
	.native-product .np-section-heading {
		margin-bottom: 40px;
	}
	.browser-product .browser-writing-tools {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.product-tools {
		padding: 76px 24px;
	}
	.product-tools .pt-heading {
		margin-bottom: 36px;
	}
	.product-tools .pt-heading > p:last-child {
		font-size: 18px;
	}
	.product-tools .pt-grid {
		grid-template-columns: 1fr;
		gap: 56px;
	}
	.product-tools .pt-card {
		padding: 32px;
		border-radius: 24px;
	}
	.product-tools .pt-card h3 {
		font-size: 31px;
	}
	.product-tools .pt-control {
		max-width: 220px;
	}
	.product-tools .pt-control img {
		border-radius: 12px;
	}
	.product-tools .pt-prediction-shot {
		max-width: 300px;
	}
	.product-tools .pt-more-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px 18px;
	}
	.np-extension .product-tools {
		padding: 72px 0 60px;
	}
}
@media (max-width: 370px) {
	.product-hero .product-hero-copy h1 {
		font-size: 38px;
	}
	.browser-product--firefox .product-hero .product-hero-copy h1 {
		font-size: 46px;
	}
	.product-tools .pt-card {
		padding: 28px;
	}
	.product-tools .pt-more-links {
		grid-template-columns: 1fr;
	}
}