/* Screentake — marketing site
 *
 * Dark only. The app is used dark, its icon is near-black, and a light mode
 * here would be a second design to keep true for no one who asked. The sister
 * sites carry both because their apps do.
 *
 * The accent is the app's own red — Theme.record, the colour of the record
 * button, the playhead and the light in the icon. Backtask's orange is
 * Backtask's.
 */

:root {
	--bg:        #0B0B0D;
	--bg-raised: #131317;
	--bg-card:   #141419;
	--line:      rgba(255,255,255,0.09);
	--line-soft: rgba(255,255,255,0.06);

	--text:      rgba(255,255,255,0.94);
	--text-mid:  rgba(255,255,255,0.62);
	--text-dim:  rgba(255,255,255,0.40);

	--accent:    #ED454F;
	--accent-dim:rgba(237,69,79,0.12);

	--wrap:      1080px;
	--radius:    16px;

	color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
	background: var(--bg);
	color: var(--text);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------- nav */

.nav {
	position: sticky; top: 0; z-index: 50;
	background: rgba(11,11,13,0.72);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid var(--line-soft);
}
.nav__inner { display: flex; align-items: center; gap: 28px; height: 60px; }
.nav__brand { display: flex; align-items: center; gap: 9px; font-weight: 650; letter-spacing: -0.01em; }
.nav__brand img { width: 26px; height: 26px; }
.nav__links { display: flex; gap: 26px; margin-left: auto; }
.nav__link { color: var(--text-mid); font-size: 0.9rem; transition: color .15s; }
.nav__link:hover { color: var(--text); }
.nav__link--on { color: var(--text); }
.nav__soon {
	font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--text-dim); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
	white-space: nowrap;
}

/* ---------------------------------------------------------------- buttons */

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--accent); color: #fff;
	font-weight: 600; font-size: 0.95rem;
	padding: 13px 26px; border-radius: 999px;
	border: 1px solid transparent;
	transition: transform .15s, filter .15s;
	white-space: nowrap;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn--sm { padding: 8px 18px; font-size: 0.85rem; }
.btn__icon { width: 17px; height: 17px; flex: 0 0 17px; }
/* Apple's own badge stacks a kicker over the store name; the button keeps the
   same height either way because the kicker is tiny and tight-leaded. */
.btn__stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.btn__kicker { font-size: 0.62rem; font-weight: 500; opacity: 0.75; letter-spacing: 0.01em; }
/* ⚠️ Both hero buttons share a minimum width. Sized to each other rather than
   to their labels, or "Coming soon" and "Watch Video" come out visibly
   different widths and the pair reads as misaligned rather than as a set. */
.hero__cta .btn { min-width: 196px; }
.btn--ghost {
	background: transparent; color: var(--text);
	border-color: var(--line);
}
.btn--ghost:hover { background: rgba(255,255,255,0.05); filter: none; }

/* ---------------------------------------------------------------- hero */

.hero { padding: 104px 0 88px; text-align: center; position: relative; overflow: hidden; }
.hero::before {
	/* One soft source off the top, the way the app's own backdrops are composed:
	   light from outside an edge, never a blob in the middle of the frame. */
	content: ''; position: absolute; inset: -40% 0 auto 0; height: 560px;
	background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(237,69,79,0.16), transparent 70%);
	pointer-events: none;
}
.hero > * { position: relative; }

.eyebrow {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: 0.74rem; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
	color: var(--text-dim);
	border: 1px solid var(--line); border-radius: 999px; padding: 6px 15px;
	margin-bottom: 30px;
}
.eyebrow::before {
	content: ''; width: 6px; height: 6px; border-radius: 50%;
	background: var(--accent); box-shadow: 0 0 10px var(--accent);
}

h1 {
	font-size: clamp(2.5rem, 6.2vw, 4.25rem);
	font-weight: 700; letter-spacing: -0.035em; line-height: 1.04;
	margin: 0 auto 22px; max-width: 16ch;
	/* Balanced, or a short last word drops to a line of its own — "Free to
	   record. Free to / edit." reads as a layout bug rather than a heading. */
	text-wrap: balance;
}
.hero__sub {
	text-wrap: pretty;
	font-size: clamp(1.02rem, 1.8vw, 1.16rem);
	color: var(--text-mid); max-width: 56ch; margin: 0 auto 36px;
}
.hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero__meta {
	margin-top: 34px;
	font-size: 0.73rem; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
	color: var(--text-dim);
	display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.hero__meta span + span::before { content: '·'; margin-right: 10px; color: rgba(255,255,255,0.22); }

/* ---------------------------------------------------------------- sections */

.section { padding: 88px 0; border-top: 1px solid var(--line-soft); }
.section__head { max-width: 46ch; margin-bottom: 44px; }
.section__eyebrow {
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--accent); margin-bottom: 14px;
}
.section h2 {
	font-size: clamp(1.7rem, 3.4vw, 2.4rem);
	font-weight: 680; letter-spacing: -0.028em; line-height: 1.14; margin-bottom: 14px;
	text-wrap: balance;
}
.section__lede { color: var(--text-mid); font-size: 1.02rem; }

/* ---------------------------------------------------------------- features */

.grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 24px;
}
.card__icon {
	width: 34px; height: 34px; border-radius: 9px;
	background: var(--accent-dim); color: var(--accent);
	display: grid; place-items: center; margin-bottom: 16px;
}
.card__icon svg { width: 17px; height: 17px; fill: currentColor; }
.card h3 { font-size: 1rem; font-weight: 640; letter-spacing: -0.012em; margin-bottom: 7px; }
.card p { color: var(--text-mid); font-size: 0.92rem; line-height: 1.6; }

/* The lead feature gets a wide card of its own — auto-zoom is the thing every
   app in this category leads with, and burying it in a three-up grid makes it
   one of nine equal things. */
.feature-lead {
	grid-column: 1 / -1;
	background: linear-gradient(160deg, rgba(237,69,79,0.10), transparent 58%), var(--bg-card);
	border-color: rgba(237,69,79,0.24);
	padding: 34px 32px;
}
.feature-lead h3 { font-size: 1.4rem; letter-spacing: -0.02em; margin-bottom: 10px; }
.feature-lead p { font-size: 1rem; max-width: 60ch; }

/* ---------------------------------------------------------------- pricing */

/* ⚠️ Capped well inside the page. At the full 1080 the two cards ran to about
   520pt each — wide enough that a four-word feature line left most of the row
   empty and the eye had to travel back across it. A price card is a short list;
   it should look like one. */
.price-grid {
	display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr);
	align-items: stretch; max-width: 760px; margin: 0 auto;
}
.price {
	position: relative;
	background: var(--bg-card); border: 1px solid var(--line);
	border-radius: 18px; padding: 28px 26px;
	display: flex; flex-direction: column;
}
.price--pro {
	border-color: rgba(237,69,79,0.40);
	background: linear-gradient(170deg, rgba(237,69,79,0.11), transparent 58%), var(--bg-card);
	box-shadow: 0 0 0 1px rgba(237,69,79,0.10), 0 18px 40px -24px rgba(237,69,79,0.55);
}

/* The one thing the card has to say that a price alone cannot: this number is
   going away. It sits on the border, where a badge reads as a stamp on the card
   rather than another line inside it. */
.price__flag {
	position: absolute; top: -10px; left: 26px;
	font-size: 0.64rem; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase;
	color: #fff; background: var(--accent);
	padding: 4px 10px; border-radius: 999px;
	box-shadow: 0 4px 14px -4px rgba(237,69,79,0.9);
}
.price__name { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; }
.price--pro .price__name { color: var(--accent); }
.price__fig { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.price__amount { font-size: 2.9rem; font-weight: 720; letter-spacing: -0.04em; line-height: 1; }
.price__was { font-size: 1.25rem; color: var(--text-dim); text-decoration: line-through; }
.price__per { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 20px; }
.price__note { color: var(--text-mid); font-size: 0.86rem; margin-bottom: 20px; }
/* The founding note is the card's argument for acting now, so it is set apart
   rather than left as one more grey line among the features. */
.price--pro .price__note {
	background: rgba(237,69,79,0.09);
	border-left: 2px solid var(--accent);
	border-radius: 0 9px 9px 0;
	padding: 11px 13px;
	color: var(--text);
}
.price--pro .price__note strong { color: var(--accent); }
.price ul { list-style: none; display: grid; gap: 9px; margin-bottom: 24px; }
.price li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--text-mid); }
.price li svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 4px; fill: var(--accent); }
.price__foot { margin-top: auto; }

/* ---------------------------------------------------------------- closing */

.closer { padding: 96px 0; text-align: center; border-top: 1px solid var(--line-soft); }
.closer h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 14px; text-wrap: balance; }
.closer p { color: var(--text-mid); margin: 0 auto 30px; max-width: 46ch; }

/* ---------------------------------------------------------------- subhero */

.subhero { padding: 84px 0 44px; text-align: center; }
.subhero h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); margin-bottom: 14px; }
.subhero p { color: var(--text-mid); max-width: 52ch; margin: 0 auto; }

/* ---------------------------------------------------------------- prose */

.prose { max-width: 68ch; margin: 0 auto; padding: 0 0 96px; color: var(--text-mid); }
.prose h2 { font-size: 1.25rem; font-weight: 640; color: var(--text); margin: 38px 0 12px; letter-spacing: -0.015em; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 14px; }
.prose ul { margin: 0 0 16px 20px; }
.prose li { margin-bottom: 7px; }
.prose a { color: var(--accent); }
.prose strong { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------------- footer */

.foot { border-top: 1px solid var(--line-soft); padding: 46px 0 56px; }
.foot__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.foot__brand { display: flex; align-items: center; gap: 9px; font-weight: 640; }
.foot__brand img { width: 24px; height: 24px; }
.foot__social { display: flex; gap: 10px; }
.foot__social a {
	width: 34px; height: 34px; border-radius: 50%;
	border: 1px solid var(--line); display: grid; place-items: center;
	color: var(--text-dim); transition: color .15s, border-color .15s;
}
.foot__social a:hover { color: var(--text); border-color: rgba(255,255,255,0.22); }
.foot__social svg { width: 15px; height: 15px; fill: currentColor; }
.foot__links { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.88rem; color: var(--text-dim); margin-bottom: 12px; }
.foot__links a { color: var(--text-mid); }
.foot__links a:hover { color: var(--text); }
.foot__copy { font-size: 0.82rem; color: var(--text-dim); }
.foot__copy a { color: var(--text-mid); }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 860px) {
	.grid, .grid--2, .price-grid { grid-template-columns: 1fr; }
	.hero { padding: 72px 0 64px; }
	.section, .closer { padding: 64px 0; }

}

/* ---------------------------------------------------------------- legal */
/* Privacy and Terms. Long documents nobody reads end to end, so the job is to
   make them scannable: numbered headings that stand out, and the summary that
   answers the question most people actually came with pulled to the top. */

.legal { max-width: 74ch; }
.legal-updated { font-size: 0.86rem; color: var(--text-dim); }

.legal-tldr {
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: 0 12px 12px 0;
	padding: 16px 20px;
	margin: 24px 0 8px;
}
.legal-tldr strong { color: var(--text); }

.legal h2 {
	font-size: 1.06rem;
	margin: 42px 0 12px;
	padding-top: 22px;
	border-top: 1px solid var(--line-soft);
}
.legal h2:first-of-type { margin-top: 38px; }

.legal ul { margin-left: 18px; }
.legal li { margin-bottom: 9px; }
.legal li::marker { color: rgba(255,255,255,0.25); }

.legal-address {
	color: var(--text-mid); line-height: 1.8;
	border-left: 2px solid var(--line); padding-left: 16px;
}

.legal code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.87em;
	background: rgba(255,255,255,0.06); border-radius: 5px; padding: 1px 5px; color: var(--text);
}

/* ---------------------------------------------------------------- pricing page */

.pricing-page { padding-bottom: 96px; }
.pricing-page .price-grid { margin-bottom: 72px; }

.qa__title {
	font-size: 1.5rem; font-weight: 680; letter-spacing: -0.025em;
	max-width: 760px; margin: 0 auto 20px;
}
/* ⚠️ **The chevron opens something.** A decorative arrow beside a question that
   is already answered promises an interaction that is not there, and people
   click it. These are real `<details>`: native, keyboard-operable, no
   JavaScript, and the marker means what it looks like it means.

   One column, at the cards' width. Collapsed rows are short, and two columns of
   short rows is a grid of mostly empty space. */
.qa { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--line-soft); }

.qa__item { border-bottom: 1px solid var(--line-soft); }
.qa__item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	padding: 17px 2px;
	font-size: 1rem; font-weight: 620; letter-spacing: -0.012em;
	cursor: pointer; list-style: none;
	transition: color .15s;
}
/* Safari draws its own triangle unless both of these are cleared. */
.qa__item summary::-webkit-details-marker { display: none; }
.qa__item summary::marker { content: ''; }
.qa__item summary:hover { color: var(--accent); }

.qa__item summary::after {
	content: ''; flex: 0 0 auto;
	width: 7px; height: 7px;
	border-right: 1.6px solid var(--text-dim);
	border-bottom: 1.6px solid var(--text-dim);
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s ease, border-color .15s;
}
.qa__item[open] summary::after { transform: translateY(1px) rotate(-135deg); border-color: var(--accent); }
.qa__item summary:hover::after { border-color: var(--accent); }

.qa__body { padding: 0 2px 18px; }
.qa__body p { color: var(--text-mid); font-size: 0.93rem; line-height: 1.64; max-width: 68ch; }
.qa__body a { color: var(--accent); }

@media (prefers-reduced-motion: reduce) { .qa__item summary::after { transition: none; } }

/* ---------------------------------------------------------------- contact */

.contact-page { padding-bottom: 96px; }
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 64px; }
.contact-card {
	background: var(--bg-card); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 26px 24px;
	display: block; transition: border-color .15s, background .15s;
}
.contact-card:hover { border-color: rgba(237,69,79,0.34); background: var(--bg-raised); }
.contact-card h2 { font-size: 1rem; font-weight: 640; margin-bottom: 7px; letter-spacing: -0.012em; }
.contact-card p { color: var(--text-mid); font-size: 0.92rem; margin-bottom: 14px; }
.contact-card__addr { color: var(--accent); font-size: 0.9rem; font-weight: 550; }
.contact-prose { margin: 0; max-width: 68ch; padding-bottom: 0; }

@media (max-width: 860px) {
	.contact-grid { grid-template-columns: 1fr; }
	.hero__cta .btn { min-width: 0; width: 100%; }
	.price__flag { left: 20px; }
}

/* ---------------------------------------------------------------- mobile nav */

.nav__cta { margin-left: 4px; }

.nav__burger {
	display: none;                 /* shown by the breakpoint above */
	margin-left: auto;
	width: 40px; height: 40px; padding: 0;
	background: none; border: 0; cursor: pointer;
	flex-direction: column; align-items: center; justify-content: center; gap: 5px;
	-webkit-tap-highlight-color: transparent;
}
.nav__burger span {
	display: block; width: 19px; height: 1.5px; border-radius: 2px;
	background: var(--text);
	transition: transform .22s ease, opacity .15s ease;
}
/* The three bars become an X, so the control says what pressing it will do
   rather than showing the same icon in both states. */
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-panel {
	position: fixed; inset: 60px 0 0 0;   /* 60px is the nav bar's height */
	z-index: 49;
	background: var(--bg);
	overflow-y: auto;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .2s ease, transform .2s ease;
}
.nav-panel.is-open { opacity: 1; transform: none; }
.nav-panel__inner {
	min-height: 100%;
	display: flex; flex-direction: column;
	padding: 18px 24px 34px;
}

.nav-panel__link {
	font-size: 1.6rem; font-weight: 640; letter-spacing: -0.025em;
	color: var(--text-mid);
	padding: 15px 0;
	border-bottom: 1px solid var(--line-soft);
}
.nav-panel__link--on { color: var(--text); }
.nav-panel__link--on::after {
	content: ''; display: inline-block;
	width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
	margin-left: 10px; vertical-align: middle;
}

.nav-panel__foot { margin-top: auto; padding-top: 34px; }
.nav-panel__foot .btn, .nav-panel__foot .nav__soon {
	display: flex; width: 100%; text-align: center; justify-content: center;
}
.nav-panel__legal {
	display: flex; gap: 10px; justify-content: center;
	margin-top: 18px; font-size: 0.86rem; color: var(--text-dim);
}
.nav-panel__legal a { color: var(--text-mid); }

/* The panel covers the viewport; the page behind it must not scroll under the
   finger while it is open. */
body.nav-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.nav-panel, .nav__burger span { transition: none; }
}

/* ⚠️ Nothing on any page may be wider than the viewport. The nav overflowing
   was the symptom that made this worth asserting rather than assuming — a
   single wide element puts the whole document into horizontal scroll, and it
   reads as the page being broken rather than as one element being wrong. */
html, body { overflow-x: hidden; }

@media (max-width: 860px) {
	/* The bar becomes brand + burger. Shrinking the links to fit was the first
	   attempt and it overflowed the viewport — three links and a pill do not go
	   in 375 points, and the horizontal scroll that caused took the whole page
	   with it, not just the nav.

	   ⚠️ This block has to sit AFTER `.nav__burger { display: none }` above.
	   A media query does not beat a later rule of equal specificity, so with
	   the two the other way round the burger never appeared and the nav was
	   simply empty on a phone. */
	.nav__links, .nav__cta { display: none; }
	.nav__burger { display: flex; }
}