/*
 * The landing page's only stylesheet.
 *
 * Five blocks. The first two are ports rather than authorship; the last three
 * are ours, because the artboard has none of them:
 *
 * 1. The design's `<helmet>` block, verbatim (design lines 14–27). Everything
 *    else the artboard styles is an inline `style` attribute and STAYS one —
 *    the design is the specification for style, and lifting its inline rules
 *    into classes here would be a rewrite nobody could diff against it.
 *
 * 2. The `style-hover="…"` attributes, which have no static equivalent. The
 *    dc-runtime implements them by swapping the element's inline style on
 *    mouseover; a static page needs a `:hover` rule, and a `:hover` rule can
 *    only beat an inline `style` attribute with `!important`. That is why
 *    every declaration below carries one. Each class is named for what it
 *    does and its value is the design's own string.
 *
 * 3. Reaching the page without a mouse: a focus ring, the skip link and the
 *    screen-reader-only live region. The artboard is a pointer mock and has
 *    none of it. See the note on that block.
 *
 * 4. Honouring `prefers-reduced-motion`, which the artboard cannot: it has no
 *    media query of any kind, and two of its animations run forever with no
 *    way to stop them.
 *
 * 5. The layout below 1080px, which the design does not have (its root says
 *    `min-width:1080px`) and which is therefore ours. It is the last block in
 *    this file and every rule in it is bounded ABOVE by a `max-width` query.
 *    See the note on that block for why it is written in that shape and not
 *    the mobile-first one CLAUDE.md asks for.
 *
 * See docs/reference/ui-source-and-build.md.
 */

/* ---------------------------------------------- the design's helmet, 14–27 */

html,body{margin:0;padding:0;background:#15181d;scroll-behavior:smooth}
*{box-sizing:border-box}
a{color:#c0432c;text-decoration:none}
a:hover{color:#8f3020}
button{font-family:inherit}
input{font-family:inherit}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes inkfade{from{opacity:0}to{opacity:1}}
@keyframes inkpop{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
@keyframes toastin{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

/* ------------------------------------------------------------- navigation */

/*
 * The design navigates with `<button onClick>`, which a crawler cannot follow
 * and a middle-click cannot open. Every button that goes somewhere is a real
 * `<a href>` here — `/pricing`, `/`, `/#publish`, `mailto:` — carrying the
 * design's own inline style. The rule above would recolour the ones whose
 * design style set no colour of its own, so those keep what they inherit,
 * which is exactly what the button did.
 */
a.as-button,
a.as-button:hover {
	color: inherit;
}

/*
 * A <button> centres its label vertically on its own; an <a> does not, so the
 * tour's "Try it free" — the one converted button whose design style set no
 * display of its own — rendered its text along the top edge of a 40px box
 * (found at C-02, 2026-09-06). Anchors whose design style already says
 * inline-flex keep it: inline style outranks this rule.
 */
a.as-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ------------------------------------------------- the style-hover ports */

.hv-fg:hover { color: #f9fafc !important; }
.hv-ink:hover { color: #15181d !important; }
.hv-cta:hover { background: #d4543c !important; }
.hv-cta-glow:hover { background: #d4543c !important; box-shadow: 0 12px 34px rgba(192, 67, 44, .6) !important; }
.hv-outline:hover { border-color: #f9fafc !important; }
.hv-card:hover { box-shadow: 0 28px 70px rgba(192, 67, 44, .3) !important; }
.hv-invert:hover { background: #15181d !important; color: #f9fafc !important; }
.hv-lift:hover { box-shadow: 4px 5px 0 rgba(24, 28, 34, .8) !important; }
.hv-tint:hover { background: rgba(249, 250, 252, .07) !important; }
.hv-accent:hover { background: #c0432c !important; }
.hv-accent-on:hover { background: #c0432c !important; color: #fdf4f3 !important; }
.hv-row:hover { background: #22252b !important; }

/* ------------------------------------------------------- the sc-if ports */

/*
 * The artboard renders a modal by NOT rendering it — `<sc-if value="{{ tourOpen }}">`.
 * A static page ships all of them and hides them, and every one of those
 * elements carries an inline `display:flex` from the design, which beats the
 * browser's own `[hidden]{display:none}`. So `hidden` means nothing here
 * without this rule.
 */
[hidden] { display: none !important; }

/*
 * `navStyle(on)` (design 570) is a route-dependent inline style, and the nav is
 * one shared partial across two pages — so the page says which route it is and
 * this reproduces the `on` branch. No JavaScript: a crawler and a
 * no-script visitor see the same highlighted link a browser does.
 */
[data-route='pricing'] .nav-pricing {
	font-weight: 700 !important;
	color: #f9fafc !important;
	border-bottom: 1.6px solid #c0432c !important;
}

/*
 * Where the toast RESTS, which the design only ever says inside an animation.
 *
 * The toast is centred with `left:50%` and its inline style carries no
 * transform; the matching `translate(-50%,0)` exists once, as the last keyframe
 * of `toastin` (design 27, ported verbatim above). An animation's default
 * `fill-mode` is `none`, so it stops holding that frame the instant it ends —
 * 0.16s in, the toast jumps right by half its own width and sits there for the
 * remaining 2.4 seconds of the 2.6 the script gives it. Under the
 * `prefers-reduced-motion` block below, where every duration is 0.01ms, it is
 * never centred at all.
 *
 * The design's own final keyframe IS the specification for where it comes to
 * rest; this declares that value somewhere it can hold. No `!important` — the
 * inline style sets no transform, so there is nothing to beat.
 */
[data-modal='toast'] {
	transform: translate(-50%, 0);
}

/* --------------------------------------------- reachable without a mouse */

/*
 * The artboard is a desktop mock drawn for a pointer: no landmarks, no dialog
 * roles, no focus ring, no keyboard path to the seek bar. None of that is a
 * fault in the port — it is not in the design to port — but the apex is the
 * page a stranger arrives on, so it is ours. See ui/landing/landing.js for the
 * behavioural half (focus into a modal, the tab trap, and giving focus back).
 *
 * Every rule here is inert until something takes focus, so it changes nothing
 * the design specifies about how the page looks at rest.
 */

/*
 * A visible focus indicator, which the page had nowhere: the design sets
 * `outline:none` on the sign-in field, and an inline style can only be beaten
 * with `!important` — the same reason the hover ports above carry one.
 * `:focus-visible` rather than `:focus`, so a mouse click does not ring the
 * button it just pressed.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #c0432c !important;
	outline-offset: 2px;
}

/*
 * Present for a screen reader, absent for everyone else. Clipped rather than
 * moved off-screen with a negative offset — the walk asserts that no element's
 * box crosses the viewport edge at 390px, and a rule that parks something at
 * `left:-9999px` breaks that check for a real reason.
 */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The skip link is `.sr-only` until it takes focus, then it is a real button. */
.skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 400;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 18px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	background: #f9fafc;
	color: #15181d;
	border: 2px solid #15181d;
	border-radius: 14px 6px 12px 7px/7px 12px 6px 14px;
	font: 700 16px/1 Kalam, cursive;
}

/* `<main id="main" tabindex="-1">` is the skip link's target; it must not ring. */
main:focus {
	outline: none;
}

/* -------------------------------------------------- when motion is unwanted */

/*
 * Two of the design's animations run forever and cannot be stopped: the hero's
 * hand-written annotation slides back and forth (`nudge`, design 21 and 54) and
 * the "Dana is drawing" dot pulses (`blink`, design 22 and 88). Both start on
 * their own, both last far longer than five seconds, both sit beside text
 * somebody is trying to read, and the page offers no way to turn either off.
 * That is WCAG 2.2.2 as written, and `scroll-behavior:smooth` in the design's
 * helmet moves the whole viewport under a person who asked for an anchor.
 *
 * The artboard has no media query of any kind, so there is nothing here to
 * port. `prefers-reduced-motion` is an OS setting a person has already made —
 * this is the page reading it rather than asking again.
 *
 * The tour is deliberately NOT stopped. Its captions and chapters are the
 * content, it starts because somebody pressed "Watch a 90s tour" rather than on
 * its own, and its pause button is beside it. What this does reach there is the
 * progress bar's `transition`, which then steps instead of sliding.
 */
@media (prefers-reduced-motion: reduce) {
	/* Both, because the helmet declares it on both (design 15) and matching the
	   selector it has to beat is cheaper than reasoning about which one scrolls. */
	html,
	body {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------- below the design's floor */

/*
 * The design is an artboard 1080px wide and has no layout under it at all.
 * Reviewers open share links on phones and tap the logo, so the landing page
 * needs one. This block is it.
 *
 * **Why max-width, when CLAUDE.md says mobile-first.** The convention assumes
 * we own the base layer. Here we do not: the base layer is the design's own
 * `style` attributes, inline on nearly every element, and no media query can
 * reach an inline style. The only thing that can override one is an
 * `!important` rule — which then applies at EVERY width unless a query bounds
 * it. So the choice is not "min-width or max-width", it is:
 *
 *   - bound our rules above, and ≥1080px is provably the design, because this
 *     file contributes nothing to layout there; or
 *   - write mobile-first and restore the desktop by re-declaring the design's
 *     own values in a `min-width` block — a second copy of the artboard, in a
 *     second language, where one typo silently changes the design and nothing
 *     would catch it.
 *
 * The ledger's bar for L-07 is "at ≥1080px the page is the design pixel for
 * pixel". The first shape makes that a property of the file; the second makes
 * it a claim. The design wins over the convention, and this comment is the
 * record of the trade.
 *
 * Every declaration is `!important` for the reason above, and every value is
 * either a design value or a fallback the design never specified.
 */

@media (max-width: 1079.98px) {
	/* Design line 29. Above this query it still stands and costs nothing; here
	 * it is the single reason a phone scrolls sideways. */
	[data-route] { min-width: 0 !important; }

	/* The design's 46px gutters, narrowed. Horizontal only — the vertical
	 * rhythm between sections is the design's and stays. */
	.r-section { padding-left: 24px !important; padding-right: 24px !important; }

	.r-nav { gap: 10px !important; padding: 0 18px !important; }

	/* The footer is a logo line and four links, `space-between` across the full
	 * width. It is the widest thing on the page once the gutters close in. */
	.r-footer,
	.r-footer-links { flex-wrap: wrap !important; }

	/* Hero, plan cards, the Pro tick list, the Pro-adds grid: every
	 * `1fr 1fr` becomes one column. */
	.r-hero,
	.r-grid-2 { grid-template-columns: 1fr !important; }
	.r-hero { gap: 30px !important; }

	/* Rows of full-height buttons that would otherwise run off the edge. */
	.r-flex-wrap { flex-wrap: wrap !important; }

	/* `#publish` is already `flex-wrap:wrap`; its two children are what pin it
	 * open — a 360px floor on the text and a fixed 430px mockup. */
	.r-publish { gap: 30px !important; }
	/* Both children take the whole row, so the copy is never squeezed beside
	 * the mockup: with the column at basis 0 and the panel at 300px, a 358px
	 * row held both and gave the paragraph the 28px left over — one word per
	 * line, 5,653px tall on a phone (C-03, 2026-09-06). */
	.r-publish-col { min-width: 0 !important; flex: 1 1 100% !important; }
	.r-panel { flex: 1 1 100% !important; max-width: 430px; }

	/* A modal is centred in a fixed overlay, so anything taller than the
	 * viewport is unreachable rather than merely clipped. Top-aligned and
	 * scrollable is the version that always has a way out. */
	.r-overlay { padding: 16px !important; align-items: flex-start !important; overflow-y: auto !important; }
	.r-tour-controls { flex-wrap: wrap !important; }
	.r-tour-seek { min-width: 130px !important; }
}

@media (max-width: 760px) {
	/*
	 * Publishing / Pricing / The tour come out of the nav, leaving the logo,
	 * Sign in and Start sketching. The footer carries all three at every width,
	 * so nothing becomes unreachable. 760 rather than 1080 because they still
	 * fit on a tablet, and the design should survive wherever it can.
	 */
	.r-nav-links { display: none !important; }
}

@media (max-width: 640px) {
	.r-section { padding-left: 16px !important; padding-right: 16px !important; }

	/* The `font` shorthand carries a unitless line-height, so overriding the
	 * size alone keeps the design's ratio. 62 / 54 / 46-42-40-36. */
	.r-hero-h1 { font-size: 40px !important; }
	.r-price-h1 { font-size: 36px !important; }
	.r-h2 { font-size: 30px !important; }

	/* The comparison keeps its three columns — a plan matrix that stacks stops
	 * being a comparison — on narrower Free/Pro columns and tighter gutters. */
	.r-matrix {
		grid-template-columns: 1fr 52px 52px !important;
		gap: 8px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	.r-matrix span { font-size: 15px !important; }
	/* Except its last row, which is a sentence and two buttons. */
	.r-matrix-cta { grid-template-columns: 1fr !important; gap: 12px !important; }

	.r-tour-stage { height: 240px !important; }

	/* Wrapped, `space-between` puts one item per line and spreads four links
	 * from edge to edge. Centred is what a stacked footer wants. */
	.r-footer,
	.r-footer-links { justify-content: center !important; }
}