/* AgentPad site — the Taska page's styling, shared by index.html (the beta teaser) and index_release.html. */

body, h2, h3, p {
	margin: 0 auto;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
	color: #777777;
	-webkit-font-smoothing: subpixel-antialiased;
}

html {
	scroll-behavior: smooth;
	padding: 0px 16px;
}

h2 { color: #484848; font-weight: 600; }
p { font-weight: 400; font-size: 15px; line-height: 1.4; margin-bottom: 20px; }
strong, b { font-weight: bold; }
a { color: #318DFF; text-decoration: underline; }
::placeholder { color: rgba(0, 0, 0, 0.35); }

/* ── Navs ─────────────────────────────────────────────────────────────── */

#floatingTopNav {
	box-sizing: border-box;
	display: flex;
	position: fixed;
	justify-content: space-between;
	align-items: center;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0px 12px 0px 4px;
	background-color: rgba(245, 245, 250, 0.9);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.09), 0px 1px 0px rgba(0, 0, 0, 0.10);
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease-in-out, visibility 0s 0.5s;
}

#floatingTopNav.visible {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease-in-out;
}

/* The icon's visible square (90% of the image) runs from the baseline to the top of the wordmark's capitals. */
#floatingTopNav { min-height: 44px; }
#floatingTopNav img { width: 18px; height: 18px; margin: 0px 7px 0px 10px; position: relative; top: 1px; }

#initialTopNav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 50px;
	margin: 0px 20px;
}

#initialTopNav a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	font-size: 17px;
}

#initialTopNav a:not(.loopware-mark) { font-size: 15px; }
.loopware-mark { font-weight: 600; letter-spacing: 0.02em; }
/* The infinity logo in the link's own colour, as tall as its capitals. */
.loopware-mark .loop {
	display: inline-block;
	width: 24px;
	height: 12px;
	margin-right: 7px;
	background-color: currentColor;
	-webkit-mask: url("img/Loopware.svg") center / contain no-repeat;
	mask: url("img/Loopware.svg") center / contain no-repeat;
}

.wordmark { margin: 0px; font-weight: 300; }
.wordmark strong { font-weight: 500; }

/* ── Header ───────────────────────────────────────────────────────────── */

#nav-and-header-container {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(-50vw + 50%);
	position: relative;
	isolation: isolate;
	background-image: linear-gradient(to bottom, #2A5BC8, #4A2BC0, #8A2BE2);
}

/* Rows of the transcript's little rounded cards behind the header, with the odd ripple through
   them (drawn by js/cards.js), fading out toward the edges. */
.header-cards {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 40%, black 25%, transparent 100%);
	mask-image: radial-gradient(ellipse 75% 85% at 50% 40%, black 25%, transparent 100%);
}

.header-cards canvas { display: block; width: 100%; height: 100%; }

#nav-and-header-container p { color: rgba(255, 255, 255, 0.8); }
#nav-and-header-container p strong { color: white; }

/* As tall as loopware.com's header (its nav + 7vh + 344px), whatever's in it; taller only if the
   contents need it. The window tucks 40px up into the bottom, as the card does there. */
#top-header {
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: calc(7vh + 344px);
	margin: 0px 16px;
	padding-bottom: 60px;
}

#top-header .hero-icon {
	width: 100%;
	max-width: 180px;
	margin-right: 32px;
	flex-shrink: 1;
}

#header-center-div {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	max-width: 488px;   /* as wide as its contents, so icon + text sit centred as one group */
}

/* Title and tagline at loopware.com's sizes. */
#header-center-div .wordmark { font-size: 30px; }
#header-center-div .tagline { margin: 1px 0px 20px 0px; font-weight: 500; font-size: 14px; }
/* The button is exactly as wide as the title and tagline: width 0 keeps it out of the column's own
   width, then it stretches to fill that. */
#header-center-div .beta-button { width: 0px; min-width: 100%; }

@media (max-width: 620px) {
	#top-header { flex-direction: column; text-align: center; }
	#top-header .hero-icon { max-width: 96px; margin: 0px; }
	#header-center-div { align-items: center; text-align: center; margin: 12px 0px 0px 0px; }
	#header-center-div .wordmark { font-size: 27px; }
	#header-center-div .tagline { margin-left: auto; margin-right: auto; }   /* centred: the wide layout pins it left */
}

/* ── Beta buttons ─────────────────────────────────────────────────────── */

.beta-button {
	display: inline-block;
	box-sizing: border-box;
	width: 370px;
	max-width: 100%;
	padding: 10px 0px;   /* loopware.com's button height */
	border: 1px solid white;
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	color: white;
	font-weight: 600;
	font-size: 15px;
	background-color: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: background-color 0.2s;
}

.beta-button:hover { background-color: rgba(255, 255, 255, 0.35); }

/* The solid blue version: floating nav and final section. */
.beta-button.solid {
	width: auto;
	padding: 10px 22px;
	border: 1px solid #3478CD;
	border-radius: 6px;
	background-color: #6AA2FF;
	text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
}

.beta-button.solid:hover { background-color: #5A95FA; }

.beta-subtitle {
	display: block;
	max-width: 440px;
	margin: 8px 0px 0px 0px;
	font-size: 13px;
}

/* ── Sections ─────────────────────────────────────────────────────────── */

section {
	display: flex;
	justify-content: center;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(-50vw + 50%);
	padding: 72px 0px;
	font-size: 15px;
	background-image: linear-gradient(to bottom, #F0F0F5, rgba(238, 238, 245, 0));
	border-top: 1px solid rgba(0, 0, 0, 0.15);
}

/* The section right under the header has no line: the hero floats over the join. */
section.first { padding-top: 0px; border-top: none; background-image: none; }
/* `display: flex` above would beat the `hidden` attribute. */
section[hidden] { display: none; }

section h1 {
	font-weight: bold;
	font-size: 30px;
	text-transform: uppercase;
	margin: 0px 0px 39px 0px;
	background: linear-gradient(90deg, #4C9DFF, #9A4DFF);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	width: fit-content;
}

.section-div {
	box-sizing: border-box;
	width: 100%;
	max-width: 940px;
	padding: 0px 20px;
}

.subhero-container {
	max-width: 650px;
	margin: 30px auto 60px auto;
}

.subhero-container h2 { text-align: center; font-size: 24px; }
.subhero-container .mini-section-subtitle { text-align: center; margin-top: 20px; }

p.mini-section-title { color: #484848; font-size: 20px; font-weight: bold; margin-bottom: 0; }
p.mini-section-subtitle { color: rgba(72, 72, 72, 0.8); font-size: 18px; }
p.small-title { font-size: 16px; font-weight: 500; color: rgba(72, 72, 72, 0.8); margin: 0px 0px 4px 0px; }

/* Four short highlights under the hero. */
.highlights {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 32px;
	margin: 36px 0px 20px 0px;
}

.highlights p { margin: 0px 0px 12px 0px; font-size: 16px; color: rgba(72, 72, 72, 0.8); }
.highlights strong { display: block; color: #484848; font-size: 17px; }

@media (max-width: 620px) {
	.highlights { grid-template-columns: 1fr; }
}

/* ── Hero shot and video cards ────────────────────────────────────────── */

.fixed-screenshot-div {
	width: 100%;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 10px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	overflow: hidden;
	border-radius: 10px;
	margin-bottom: 72px;
}

.fixed-screenshot-div img { display: block; width: 100%; height: auto; }

#hero-screenshot {
	position: relative;   /* over the (positioned) header it tucks up into */
	/* The window's top 40px above the header's bottom, as loopware.com's card. Hero.png's window
	   starts 41px down its 1600px width (a % margin is of the width). */
	margin-top: calc(-40px - 100% * 41 / 1600);
	border-radius: 8px;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 20px;
	border: 0.5px solid rgba(0, 0, 0, 0.2);
	margin-bottom: 0px;
}

/* A shot that carries its own window frame and shadow (Hero.png): no box around it. */
#hero-screenshot.shot { border: 0; border-radius: 0; box-shadow: none; overflow: visible; }

/* A video card plays (or, as a placeholder, lights up) when it's the one nearest the middle of
   the screen — see js/app.js. */
.video-card {
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 57px;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	border: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
	opacity: 0.8;
	transition: box-shadow 0.3s, border-color 0.3s, opacity 0.3s;
}

.video-card.playing {
	opacity: 1;
	border: 2px solid #49AEFF;
	box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.20);
}

.video-card video { display: block; width: 100%; height: auto; }

/* Stand-in for a video or screenshot that hasn't been made yet. */
.placeholder {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	aspect-ratio: 16 / 10;
	padding: 24px 12%;
	box-sizing: border-box;
	text-align: center;
	background:
		radial-gradient(circle at 20% 15%, rgba(76, 157, 255, 0.18), transparent 55%),
		radial-gradient(circle at 85% 90%, rgba(154, 77, 255, 0.18), transparent 55%),
		#F7F7FC;
}

.placeholder .play {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, #4C9DFF, #9A4DFF);
	box-shadow: 0px 4px 14px rgba(106, 92, 255, 0.35);
	position: relative;
}

.placeholder .play::after {
	content: "";
	position: absolute;
	left: 22px;
	top: 17px;
	border-style: solid;
	border-width: 11px 0px 11px 17px;
	border-color: transparent transparent transparent white;
}

.video-card.playing .play { animation: pulse 1.6s ease-in-out infinite; }

@keyframes pulse {
	50% { transform: scale(1.08); box-shadow: 0px 6px 22px rgba(106, 92, 255, 0.5); }
}

.placeholder .kind {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8A7BFF;
}

.placeholder .shows { margin: 0; max-width: 560px; font-size: 16px; color: rgba(72, 72, 72, 0.85); }

.alt-video-layout {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	gap: 24px;
	margin-bottom: 57px;
}

.alt-video-layout .video-card { flex: 1; flex-basis: calc(50% + 60px); margin-bottom: 0px; }
.alt-video-layout .placeholder { aspect-ratio: 4 / 3; padding: 20px 8%; }
.alt-video-right-child { flex: 1; flex-basis: calc(50% - 60px); }

@media (max-width: 620px) {
	.alt-video-layout { flex-direction: column; }
	.alt-video-layout .video-card { order: 1; }
	.alt-video-right-child { order: 0; }
	.placeholder .shows { font-size: 14px; }
}

/* "And so much more" grid. */
.more-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

.more-grid div {
	padding: 18px 20px;
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	background: white;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.04);
}

.more-grid p { margin: 0; }
.more-grid p.mini-section-title { font-size: 17px; margin-bottom: 4px; }
.more-grid p.mini-section-subtitle { font-size: 15px; }

/* Feature lists: plain content, not cards — a bold title and one line, with a small SF Symbol
   hanging to its left (img/symbols, rendered by scripts/render-web-symbols.swift). */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px 32px; }
.feature-grid.two-up { grid-template-columns: 1fr 1fr; }
.feature-grid div { position: relative; padding-left: 46px; }
.feature-grid p { margin: 0; }
.feature-grid p.mini-section-title { font-size: 17px; margin-bottom: 2px; }
.feature-grid p.mini-section-subtitle { font-size: 15px; }
.feature-icon { position: absolute; left: 0; top: 0px; width: 32px; height: 32px; }
@media (max-width: 620px) { .feature-grid.two-up { grid-template-columns: 1fr; } }

/* A one-line subtitle right under a section's heading. */
p.section-lede { margin: -27px 0px 32px 0px; }
/* The quieter "And so much more" list under a feature grid: no cards, no icons. */
h2.more-heading { font-size: 20px; margin: 56px 0px 16px 0px; }
.more-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 32px; }
.more-list p { margin: 0px; font-size: 15px; color: rgba(72, 72, 72, 0.8); }
.more-list strong { display: block; color: #484848; }
/* Marks a feature that's behind Settings ▸ Labs. */
.labs { display: inline-block; margin-left: 4px; padding: 0px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; line-height: 16px; vertical-align: 1px; color: #7A4DFF; background: rgba(154, 77, 255, 0.1); }
p.labs-note { margin: 12px 0px 0px 0px; font-size: 13px; color: rgba(72, 72, 72, 0.6); }
p.labs-note .labs { margin: 0px 4px 0px 0px; }

/* ── Email form ───────────────────────────────────────────────────────── */

.signup { max-width: 460px; margin: 40px auto 0px auto; }
.signup-note { text-align: center; margin-top: 6px; }
.lost-link { text-align: center; font-size: 13px; margin-top: 4px; }
.lost-link a { color: rgba(72, 72, 72, 0.6); }
.signup-form { flex-direction: column; gap: 8px; }
.signup-form input[type=submit] { margin: 4px 0 0 0; }
.signup-form .check { display: flex; gap: 8px; align-items: center; font-size: 15px; color: rgba(72, 72, 72, 0.8); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

form { display: flex; }

input[type=text], input[type=email] {
	box-sizing: border-box;
	flex-grow: 1;
	width: 100%;
	height: 40px;
	margin: 0px;
	padding: 0px 0px 0px 12px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	background-color: #FFFFFF;
	font-size: 17px;
}

input[type=submit] {
	-webkit-appearance: none;
	flex-shrink: 0;
	height: 40px;
	margin: 0 0 0 4pt;
	padding: 0pt 12pt;
	background: #6AA2FF;
	color: white;
	border: 1px solid #3478CD;
	border-radius: 5px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.35);
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
}

/* ── Final section + footer ───────────────────────────────────────────── */

.final-section-div {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 527px;
	width: 100%;
	margin: 0px 20px;
}

.final-section-div img { width: 88px; height: 88px; margin-bottom: 18px; }
p.final-section-title { color: #484848; font-size: 20px; font-weight: bold; margin-bottom: 12px; }
p.final-section-subtitle { color: rgba(72, 72, 72, 0.8); font-size: 18px; }

footer {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(-50vw + 50%);
	padding: 60px 0px 20px 0px;
	border-top: 1px solid rgba(0, 0, 0, 0.15);
	background-image: linear-gradient(to bottom, #F0F0F5, rgba(238, 238, 245, 0));
}

footer img { display: block; width: 24px; height: 12px; margin: 0px auto 12px auto; }
footer p { text-align: center; font-size: 12px; color: rgba(72, 72, 72, 0.6); }
footer a { color: rgba(72, 72, 72, 0.6); }
/* Links to the pricing and legal pages (Paddle wants them one click from anywhere). */
footer p.footer-links { margin-bottom: 10px; font-size: 13px; }
footer .footer-links a { margin: 0px 8px; color: rgba(72, 72, 72, 0.7); text-decoration: none; }
footer .footer-links a:hover { text-decoration: underline; }