/* ==========================================================================
   DriveFiler public website
   --------------------------------------------------------------------------
   Palette is taken from the actual app icon (DriveFiler.Mobile/Resources/
   AppIcon/appiconfg.svg), not invented: the blue gradient #2a73bb -> #81c7eb
   and the amber #f59f3b used for the filed-document markers. If the icon is
   ever redrawn, these values are what has to follow it.

   No framework and no build step. One stylesheet, custom properties for
   theming, and light/dark handled by prefers-color-scheme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
	/* Tells the browser to render native controls — checkboxes, text inputs, scrollbars — in the
	   matching theme. Without it they stay light-mode widgets on a dark page, and the browser's
	   own auto-darkening inverts them into pale blocks. */
	color-scheme: light dark;

	/* Brand ramp. The three anchors are sampled from the logo file itself, not chosen — 500 is the
	   "Filer" wordmark and cloud blue, 300 is the cloud's light tone, 700/800 sit where the folder
	   panel does. The rest are interpolated to fill the ramp. If the logo is ever redrawn, resample
	   and change these; nothing else in this file hard-codes a brand colour. */
	--brand-50:  #eff7ff;
	--brand-100: #d9edfe;
	--brand-200: #b3dcfc;
	--brand-300: #78c8f8;   /* sampled: cloud, light */
	--brand-400: #38a2f0;
	--brand-500: #0078e8;   /* sampled: wordmark "Filer" / primary */
	--brand-600: #0061be;
	--brand-700: #0b4d93;   /* near the folder's upper panel, #2060a8 */
	--brand-800: #103a6b;   /* near the folder's lower panel, #003888 */

	/* The amber from the filed-document tabs. */
	--accent-400: #fbcd76;
	--accent-500: #f8b840;  /* sampled */
	--accent-600: #cf8c17;

	/* Neutrals built from the wordmark navy and the tagline slate, so the greys share the logo's
	   hue rather than being a generic cool grey sitting next to it. */
	--ink-950: #060d18;
	--ink-900: #102038;     /* sampled: wordmark "Drive" */
	--ink-800: #1b2e49;
	--ink-700: #2a3f5c;
	--ink-600: #394d69;
	--ink-500: #485870;     /* sampled: tagline */
	--ink-400: #7c8ca4;
	--ink-300: #adbaca;
	--ink-200: #d6dee8;
	--ink-100: #eaeff5;
	--ink-50:  #f5f8fc;

	/* Semantic, not brand. Taken from the logo's green tab but darkened well past it: #78c8a0 is a
	   paper colour and fails contrast as text on white, which is what this is used for. */
	--positive-500: #1f8a5d;

	/* Semantic — light theme */
	--bg:            #ffffff;
	--bg-subtle:     var(--ink-50);
	--bg-inset:      var(--brand-50);
	--surface:       #ffffff;
	--surface-raised:#ffffff;
	--border:        var(--ink-200);
	--border-strong: var(--ink-300);
	--text:          var(--ink-900);
	--text-muted:    var(--ink-500);
	--text-faint:    var(--ink-400);
	--link:          var(--brand-600);
	--brand:         var(--brand-500);
	--brand-contrast:#ffffff;
	--accent:        var(--accent-600);

	/* Tinted with the wordmark navy rather than pure black, so shadows read as part of the palette. */
	--shadow-sm: 0 1px 2px rgb(16 32 56 / 0.07), 0 1px 3px rgb(16 32 56 / 0.05);
	--shadow-md: 0 4px 6px -2px rgb(16 32 56 / 0.06), 0 12px 20px -6px rgb(16 32 56 / 0.11);
	--shadow-lg: 0 10px 20px -8px rgb(16 32 56 / 0.13), 0 28px 48px -16px rgb(16 32 56 / 0.19);

	/* Type */
	--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
	             "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
	             "Liberation Mono", monospace;

	/* Spacing / shape */
	--radius-sm: 8px;
	--radius:    12px;
	--radius-lg: 18px;
	--radius-xl: 26px;
	--container: 1120px;
	--gutter: clamp(1.25rem, 4vw, 2.5rem);
}

@media (prefers-color-scheme: dark) {
	:root {
		/* Grounds are the wordmark navy taken down, not neutral black, so the logo sits on a field
		   that belongs to it. --brand steps UP the ramp here: #0078e8 is legible on white but muddy
		   on a dark ground, where #38a2f0 holds. */
		--bg:            var(--ink-950);
		--bg-subtle:     #0a1425;
		--bg-inset:      #0d1b30;
		--surface:       #101d33;
		--surface-raised:#16263f;
		--border:        #21344f;
		--border-strong: #2e4463;
		--text:          #e8eef8;
		--text-muted:    #9dafc6;
		--text-faint:    #71859e;
		--link:          var(--brand-300);
		--brand:         var(--brand-400);
		--brand-contrast:#03101f;
		--accent:        var(--accent-400);
		/* Lifted from #1f8a5d, which is tuned for white and goes muddy on a dark ground. */
		--positive-500:  #3fbe86;

		--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
		--shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.45), 0 14px 24px -8px rgb(0 0 0 / 0.5);
		--shadow-lg: 0 12px 24px -10px rgb(0 0 0 / 0.55), 0 32px 56px -20px rgb(0 0 0 / 0.6);
	}
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchor links land below the sticky header rather than under it. */
	scroll-padding-top: 5.5rem;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	margin: 0 0 0.5em;
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 680;
	text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.5rem + 3.4vw, 3.9rem); letter-spacing: -0.033em; }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.6rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.012em; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

img, svg { max-width: 100%; height: auto; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li + li { margin-top: 0.35em; }
strong { font-weight: 650; }

code, kbd {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: var(--bg-inset);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 0.1em 0.38em;
}

hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

:focus-visible {
	outline: 3px solid var(--brand-400);
	outline-offset: 2px;
	border-radius: 4px;
}

::selection { background: var(--brand-200); color: var(--ink-900); }
@media (prefers-color-scheme: dark) {
	::selection { background: var(--brand-700); color: #fff; }
}

/* Everything animated is decorative, so all of it goes away on request. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--narrow { max-width: 780px; }

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tint { background: var(--bg-subtle); border-block: 1px solid var(--border); }

.section__head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head--centred { margin-inline: auto; text-align: center; }
.section__head p { color: var(--text-muted); font-size: 1.125rem; margin-bottom: 0; }

.eyebrow {
	display: block;
	font-size: 0.8125rem;
	font-weight: 650;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--brand);
	margin-bottom: 0.75rem;
}

.lead { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3rem); color: var(--text-muted); }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--brand);
	color: var(--brand-contrast);
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 var(--radius) 0;
	font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Holds the <symbol> definitions for the brand mark. Taken out of flow rather than display:none,
   because Safari has historically declined to render <use> references into a display:none subtree. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--bg) 82%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 4.5rem;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 680;
	font-size: 1.1rem;
	letter-spacing: -0.02em;
	color: var(--text);
	text-decoration: none;
	margin-right: auto;
}
.brand:hover { color: var(--text); }
/* 38px, not the 30 this started at: below roughly 36 the mark's four sheets stop resolving and it
   reads as a blue smudge. The header is the one place the full-detail mark has to earn its detail. */
.brand svg { width: 38px; height: 38px; flex: none; }

.site-nav { display: flex; align-items: center; gap: 0.35rem; }

.site-nav a {
	color: var(--text-muted);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 550;
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius-sm);
	transition: color 0.15s, background-color 0.15s;
}
.site-nav a:hover { color: var(--text); background: var(--bg-subtle); }

/* A link must never break mid-phrase. Without this, "How it works" wraps to
   three stacked lines in the band where the nav is nearly too wide, which
   reads as a broken header rather than a tight one. */
.site-nav a { white-space: nowrap; }

/* The nav still collapses rather than becoming a hamburger — a menu button for
   a handful of links is more chrome than it saves — but it now collapses in an
   ORDER, which matters because not every item is a homepage anchor any more.
   `.site-nav__anchor` marks the three links that merely jump down the home
   page: on a phone those are redundant, because scrolling reaches the same
   content. Pricing and Contact are separate PAGES that no amount of scrolling
   finds, so they survive to the narrowest width. Hiding the whole nav was fine
   while all four items were anchors; it stopped being fine the moment
   /pricing/ existed and a phone user had no way to reach the price. */
@media (max-width: 860px) {
	.site-nav__anchor { display: none; }
}

/* Next to go is the WORDMARK, not a link. The mark alone still says who we are
   and still goes home, whereas a nav item dropped here is a page the visitor
   cannot reach at all. This has to happen well above the narrowest phone: with
   the wordmark present, brand + Pricing + Contact + the CTA overflow at ~414px
   and the button's label gets clipped to "Join th". */
@media (max-width: 520px) {
	.brand span { display: none; }
	.site-header__inner { gap: 0.75rem; }
	.site-nav a { padding-inline: 0.5rem; }
}

/* Only at the very narrowest does a nav item go, and it is Contact rather than
   Pricing — the footer carries Contact on every page, so it is still one
   scroll away, whereas the price would otherwise be reachable nowhere but the
   footer either. Squeezing all three in instead was tried and needed the CTA
   shrunk to the point of looking like a different button. */
@media (max-width: 380px) {
	.site-nav__secondary { display: none; }
}

/* --------------------------------------------------------------------------
   5. Buttons, badges, chips
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1.35rem;
	border-radius: 999px;
	border: 1px solid transparent;
	font: inherit;
	font-size: 0.9688rem;
	font-weight: 620;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 0.12s ease, box-shadow 0.15s, background-color 0.15s, border-color 0.15s;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
	background: var(--brand);
	color: var(--brand-contrast);
	box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--brand-600); color: var(--brand-contrast); box-shadow: var(--shadow-md); }
@media (prefers-color-scheme: dark) {
	.btn--primary:hover { background: var(--brand-300); }
}

.btn--ghost {
	background: transparent;
	color: var(--text);
	border-color: var(--border-strong);
}
.btn--ghost:hover { background: var(--bg-subtle); color: var(--text); }

.btn--lg { padding: 0.9rem 1.75rem; font-size: 1.03rem; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.35rem 0.85rem 0.35rem 0.65rem;
	border-radius: 999px;
	background: var(--bg-inset);
	border: 1px solid var(--border);
	color: var(--text-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.badge__dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--accent-500);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-500) 22%, transparent);
}

.status {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 650;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.status--ready {
	background: color-mix(in srgb, var(--positive-500) 14%, transparent);
	color: var(--positive-500);
	border: 1px solid color-mix(in srgb, var(--positive-500) 30%, transparent);
}
.status--soon {
	background: color-mix(in srgb, var(--accent-500) 15%, transparent);
	color: var(--accent-600);
	border: 1px solid color-mix(in srgb, var(--accent-500) 32%, transparent);
}
@media (prefers-color-scheme: dark) {
	.status--soon { color: var(--accent-400); }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 8vw, 6rem);
	background:
		radial-gradient(70ch 50ch at 12% -12%, color-mix(in srgb, var(--brand-300) 26%, transparent), transparent 62%),
		radial-gradient(55ch 42ch at 92% 6%,  color-mix(in srgb, var(--accent-500) 15%, transparent), transparent 60%),
		var(--bg);
}

/* A faint grid, masked so it fades out before the content starts. Decorative
   only — aria-hidden in the markup. */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--ink-400) 20%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--ink-400) 20%, transparent) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(70% 55% at 50% 0%, #000 0%, transparent 78%);
	opacity: 0.5;
	pointer-events: none;
}

.hero > * { position: relative; }

.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: center;
}

@media (min-width: 960px) {
	.hero__grid { grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr); }
}

.hero h1 { margin-top: 0.9rem; }

.hero__lead {
	font-size: clamp(1.125rem, 1rem + 0.55vw, 1.35rem);
	color: var(--text-muted);
	max-width: 34rem;
	margin-bottom: 2rem;
}

.hero__lead strong { color: var(--text); font-weight: 620; }

/* --------------------------------------------------------------------------
   7. Beta signup form
   -------------------------------------------------------------------------- */

.signup {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	box-shadow: var(--shadow-md);
	max-width: 34rem;
}

.signup__title { font-size: 1.05rem; font-weight: 650; margin-bottom: 0.3rem; }
.signup__hint { font-size: 0.9375rem; color: var(--text-muted); margin-bottom: 1.15rem; }

.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }

.field > label,
.field > legend {
	font-size: 0.875rem;
	font-weight: 620;
	color: var(--text);
}

/* A fieldset is the correct grouping element for the platform checkboxes, but its default border
   and padding are not wanted. Reset here rather than with a style attribute, so the site's
   Content-Security-Policy can forbid inline styles outright. */
.field--group { border: 0; padding: 0; margin-inline: 0; }
.field--group > legend { padding: 0; margin-bottom: 0.4rem; }

.field__optional { font-weight: 450; color: var(--text-faint); }

.input {
	width: 100%;
	padding: 0.75rem 0.95rem;
	font: inherit;
	font-size: 1rem;
	color: var(--text);
	background: var(--bg);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	transition: border-color 0.15s, box-shadow 0.15s;
}
.input::placeholder { color: var(--text-faint); }
.input:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
}

.input--area { resize: vertical; min-height: 9rem; line-height: 1.55; font-family: inherit; }

/* The contact form's honeypot. Taken out of view rather than display:none, because some bots skip
   fields that are display:none — the point is that it looks reachable to a script and is invisible
   to a person. Paired with aria-hidden and tabindex="-1" in the markup so it is genuinely
   unreachable by screen reader or keyboard. */
.hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.checks { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* The whole chip is the label, so the tap target is the chip rather than a
   12px box beside it — this form is mostly going to be filled in on a phone. */
.check {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	font-size: 0.9063rem;
	font-weight: 550;
	cursor: pointer;
	user-select: none;
	transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.check:hover { border-color: var(--brand-400); }
.check input { accent-color: var(--brand); width: 1rem; height: 1rem; margin: 0; cursor: pointer; }
.check:has(input:checked) {
	background: color-mix(in srgb, var(--brand) 11%, transparent);
	border-color: var(--brand);
	color: var(--link);
}
.check:has(input:focus-visible) {
	outline: 3px solid var(--brand-400);
	outline-offset: 2px;
}

.signup__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; }
.signup__actions .btn { flex: 1 1 auto; min-width: 12rem; }

.signup__small {
	font-size: 0.8125rem;
	color: var(--text-faint);
	margin-top: 0.9rem;
	margin-bottom: 0;
}

/* Reserves no space until it says something, so the card does not jump. */
.form-status {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	border-radius: var(--radius);
	font-size: 0.9375rem;
	font-weight: 550;
	border: 1px solid transparent;
}
.form-status:empty { display: none; }
.form-status--ok {
	background: color-mix(in srgb, var(--positive-500) 12%, transparent);
	border-color: color-mix(in srgb, var(--positive-500) 30%, transparent);
	color: var(--positive-500);
}
.form-status--error {
	background: color-mix(in srgb, #d64545 12%, transparent);
	border-color: color-mix(in srgb, #d64545 32%, transparent);
	color: #c53434;
}
@media (prefers-color-scheme: dark) {
	.form-status--error { color: #f08a8a; }
}

/* --------------------------------------------------------------------------
   8. App mockup (hero illustration)
   -------------------------------------------------------------------------- */

.mock {
	background: var(--surface-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	font-size: 0.8125rem;
}

.mock__bar {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.7rem 0.9rem;
	background: var(--bg-subtle);
	border-bottom: 1px solid var(--border);
}
.mock__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.mock__title {
	margin-left: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--text-faint);
	letter-spacing: 0.02em;
}

.mock__body { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .mock__body { grid-template-columns: 8.5rem minmax(0, 1fr); } }

.mock__side {
	padding: 0.85rem;
	background: var(--bg-subtle);
	border-right: 1px solid var(--border);
	display: none;
}
@media (min-width: 560px) { .mock__side { display: block; } }

.mock__side-item {
	padding: 0.4rem 0.55rem;
	border-radius: 7px;
	color: var(--text-muted);
	font-weight: 550;
	margin-bottom: 0.15rem;
}
.mock__side-item--on { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--link); }
.mock__count { float: right; opacity: 0.6; }

.mock__main { padding: 0.9rem; }

.mock__row {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.6rem 0.55rem;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
}
.mock__row + .mock__row { margin-top: 0.2rem; }
.mock__row--filed { background: var(--bg-inset); border-color: var(--border); }

.mock__file { flex: none; width: 22px; height: 26px; }

.mock__meta { min-width: 0; flex: 1; }
.mock__name {
	font-family: var(--font-mono);
	font-size: 0.7188rem;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mock__path { font-size: 0.6875rem; color: var(--text-faint); margin-top: 0.15rem; }

.mock__tag {
	flex: none;
	font-size: 0.6563rem;
	font-weight: 650;
	padding: 0.15rem 0.45rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent-500) 18%, transparent);
	color: var(--accent-600);
}
@media (prefers-color-scheme: dark) { .mock__tag { color: var(--accent-400); } }

/* --------------------------------------------------------------------------
   9. Cards / grids
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: 1.25rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.6rem;
	box-shadow: var(--shadow-sm);
}

.card__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius);
	background: var(--bg-inset);
	border: 1px solid var(--border);
	color: var(--brand);
	margin-bottom: 1rem;
}
.card__icon svg { width: 1.4rem; height: 1.4rem; }

.card h3 { margin-bottom: 0.4rem; }
.card p { color: var(--text-muted); font-size: 0.9688rem; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   10. Steps
   -------------------------------------------------------------------------- */

.steps {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	counter-reset: step;
}

.step {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.5rem 1.4rem 1.4rem;
	box-shadow: var(--shadow-sm);
}

.step::before {
	counter-increment: step;
	content: counter(step);
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: var(--brand);
	color: var(--brand-contrast);
	font-size: 0.9375rem;
	font-weight: 700;
	margin-bottom: 0.9rem;
}

.step h3 { font-size: 1.0625rem; margin-bottom: 0.35rem; }
.step p { color: var(--text-muted); font-size: 0.9375rem; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11. Path example
   -------------------------------------------------------------------------- */

.path-demo {
	margin-top: clamp(2rem, 4vw, 3rem);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: clamp(1.25rem, 3vw, 2rem);
	box-shadow: var(--shadow-sm);
}

.path-demo__label {
	font-size: 0.75rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: 0.75rem;
}

.path-demo__row {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}
@media (min-width: 780px) {
	.path-demo__row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}

.path-demo__arrow {
	display: grid;
	place-items: center;
	color: var(--brand);
	transform: rotate(90deg);
}
@media (min-width: 780px) { .path-demo__arrow { transform: none; } }
.path-demo__arrow svg { width: 1.6rem; height: 1.6rem; }

/* Long paths must scroll inside the box rather than widening the page. */
.path {
	font-family: var(--font-mono);
	font-size: 0.8438rem;
	background: var(--bg-inset);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 0.9rem 1rem;
	overflow-x: auto;
	white-space: nowrap;
	color: var(--text);
}
.path b { color: var(--link); font-weight: 650; }
.path--before { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   12. Platforms
   -------------------------------------------------------------------------- */

.platform {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.5rem 1.4rem;
	box-shadow: var(--shadow-sm);
}

.platform__icon { width: 2rem; height: 2rem; color: var(--brand); }
.platform h3 { margin: 0; font-size: 1.0625rem; }
.platform p { color: var(--text-muted); font-size: 0.9063rem; margin: 0; }
.platform__status { margin-top: auto; padding-top: 0.5rem; }

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */

.faq { max-width: 46rem; margin-inline: auto; }

.faq details {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	margin-bottom: 0.75rem;
	overflow: hidden;
}
.faq details[open] { box-shadow: var(--shadow-sm); }

.faq summary {
	cursor: pointer;
	padding: 1.05rem 1.25rem;
	font-weight: 620;
	font-size: 1.0313rem;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
	content: "";
	flex: none;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid var(--text-faint);
	border-bottom: 2px solid var(--text-faint);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.faq summary:hover { background: var(--bg-subtle); }
.faq__body { padding: 0 1.25rem 1.25rem; color: var(--text-muted); font-size: 0.9688rem; }
.faq__body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   14. Call-to-action band
   -------------------------------------------------------------------------- */

.cta {
	background: linear-gradient(135deg, var(--brand-700), var(--brand-500) 55%, var(--brand-400));
	color: #fff;
	border-radius: var(--radius-xl);
	padding: clamp(2.25rem, 5vw, 3.5rem);
	text-align: center;
	box-shadow: var(--shadow-lg);
}
.cta h2 { color: #fff; margin-bottom: 0.6rem; }
.cta p { color: color-mix(in srgb, #fff 84%, transparent); max-width: 40rem; margin-inline: auto; margin-bottom: 1.75rem; }
.cta .btn--primary { background: #fff; color: var(--brand-700); }
.cta .btn--primary:hover { background: var(--brand-50); color: var(--brand-800); }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.site-footer {
	border-top: 1px solid var(--border);
	background: var(--bg-subtle);
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
	font-size: 0.9375rem;
}

.site-footer__grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	margin-bottom: 2.25rem;
}

.site-footer h4 {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-faint);
	margin-bottom: 0.85rem;
}

.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: 0.5rem; }
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--link); text-decoration: underline; }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	justify-content: space-between;
	align-items: center;
	padding-top: 1.75rem;
	border-top: 1px solid var(--border);
	color: var(--text-faint);
	font-size: 0.875rem;
}

.site-footer__brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 620; color: var(--text); }

/* Entity + postal address. Its own row under the copyright line rather than a third flex item,
   which would have been distributed across the space-between row and read as navigation. */
.site-footer__entity {
	margin: 1rem 0 0;
	color: var(--text-faint);
	font-size: 0.8125rem;
	line-height: 1.6;
}
.site-footer__brand svg { width: 26px; height: 26px; }

/* --------------------------------------------------------------------------
   16. Legal documents
   -------------------------------------------------------------------------- */

.legal-header {
	padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--border);
	background: var(--bg-subtle);
}
.legal-header h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem); margin-bottom: 0.5rem; }
.legal-header p { color: var(--text-muted); margin: 0; }

.legal-doc {
	padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem);
	font-size: 1.0313rem;
}

/* The documents are authored as markdown with an h1 and a version line that the
   page header above already shows, so both are suppressed here rather than
   edited out of the source — the source is the immutable published text. */
.legal-doc > h1:first-child,
.legal-doc > h1:first-child + p { display: none; }

.legal-doc h2 {
	font-size: 1.4rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
}
.legal-doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1rem; }
.legal-doc h3 { font-size: 1.1rem; margin-top: 1.75rem; }
.legal-doc ul, .legal-doc ol { padding-left: 1.4em; }
.legal-doc li { margin-top: 0.45em; }
.legal-doc hr { margin: 2rem 0; }

.legal-doc table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.25rem;
	font-size: 0.9375rem;
}
.legal-doc th, .legal-doc td {
	text-align: left;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--border);
}
.legal-doc th { background: var(--bg-subtle); font-weight: 650; }

.legal-doc blockquote {
	margin: 1.25rem 0;
	padding: 0.85rem 1.15rem;
	border-left: 3px solid var(--brand);
	background: var(--bg-inset);
	border-radius: 0 var(--radius) var(--radius) 0;
	color: var(--text-muted);
}

/* Wide tables scroll rather than stretching the page. */
.table-scroll { overflow-x: auto; }

/* --------------------------------------------------------------------------
   17. Error page
   -------------------------------------------------------------------------- */

.error-page {
	min-height: 55vh;
	display: grid;
	place-content: center;
	text-align: center;
	padding-block: clamp(3rem, 8vw, 6rem);
}
.error-page .lead { margin-bottom: 2rem; }
.error-page__code {
	font-size: clamp(4rem, 12vw, 7rem);
	font-weight: 750;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--brand);
	margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   18. Pricing
   -------------------------------------------------------------------------- */

/* Built entirely from the semantic tokens, so the dark theme comes for free —
   there is no .pricing rule inside a prefers-color-scheme block, and there
   should not need to be one. */
.price-card {
	max-width: 30rem;
	margin-inline: auto;
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-lg);
	padding: clamp(1.75rem, 4vw, 2.5rem);
	box-shadow: var(--shadow-md);
}

.price-card__amount {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.35rem;
	margin-bottom: 0.35rem;
}
.price-card__figure {
	font-size: clamp(2.75rem, 8vw, 3.75rem);
	font-weight: 750;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--text);
}
.price-card__period { font-size: 1.05rem; font-weight: 600; color: var(--text-muted); }

/* The currency is stated rather than implied. "$" alone means four different
   things to a Canadian, American, Australian and Singaporean reader, and this
   is the one number on the site nobody should have to guess at. */
.price-card__currency {
	font-size: 0.8125rem;
	font-weight: 650;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: 1.25rem;
}

.price-card .btn { width: 100%; }

.price-card__note {
	margin-top: 1.1rem;
	margin-bottom: 0;
	font-size: 0.9063rem;
	color: var(--text-muted);
}

/* Left-aligned inside a centred card: a ragged-right list of features reads
   far faster than a centred one, and the eye needs a common start edge. */
.price-list {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	text-align: left;
}
.price-list li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.7rem;
	color: var(--text-muted);
}
.price-list li::before {
	content: "";
	position: absolute;
	left: 0.25rem;
	top: 0.44em;
	width: 0.45rem;
	height: 0.8rem;
	border: solid var(--positive-500);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.price-list strong { color: var(--text); font-weight: 600; }

/* The trial terms are a disclosure, not decoration. Given its own bordered
   block above the fold of the page rather than a footnote, because a reader
   who misses "your card is charged when the trial ends" has been misled even
   if the sentence was technically present. */
.trial-terms {
	max-width: 38rem;
	margin: 2rem auto 0;
	padding: 1.15rem 1.35rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-inset);
}
.trial-terms h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.trial-terms p { margin-bottom: 0.6rem; color: var(--text-muted); }
.trial-terms p:last-child { margin-bottom: 0; }

/* A single centred line closing a section — used under the pricing FAQ. */
.centred-note {
	max-width: 44rem;
	margin: 2rem auto 0;
	text-align: center;
	color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Help page
   -------------------------------------------------------------------------- */

/* The help page is ONE page with anchors rather than a tree of little ones, and
   the table of contents is what makes that work. It is also what the apps link
   into: a Help menu item opens /help/#naming directly, so these ids are part of
   a contract with DriveFiler.Desktop's HelpLinks - renaming one breaks a menu
   item in a shipped app, silently, because a bad fragment just lands at the top
   of the page rather than failing. */
.help-toc {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	max-width: 46rem;
	margin-inline: auto;
}

.help-toc a {
	padding: 0.45rem 0.85rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text-muted);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 550;
	transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.help-toc a:hover { color: var(--brand); border-color: var(--brand); background: var(--bg-subtle); }

.help-prose { max-width: 46rem; margin-inline: auto; }
.help-prose h2 { margin-bottom: 1.25rem; }
.help-prose h3 { font-size: 1.0625rem; margin-top: 2rem; margin-bottom: 0.6rem; }
.help-prose h2 + h3 { margin-top: 0; }
.help-prose p, .help-prose li { color: var(--text-muted); }
.help-prose ul { margin: 0 0 1.15rem 1.15rem; }
.help-prose li { margin-bottom: 0.45rem; }

/* An anchored heading must not land under the sticky header. */
.section[id] { scroll-margin-top: 5rem; }