/* DHMS marketing site — LAYOUT.
 *
 * This file is the reference layout (katagoge.com, which the client owns),
 * reproduced structure for structure rather than in spirit. Its measurements
 * were read out of the live DOM, and the ones that matter are:
 *
 *   nav          three columns, 20% / 60% / 20%, links centred in the middle
 *   hero         CENTRED, not left-aligned. Headline capped at 820px, the
 *                sub-paragraph at 580px, three blurred colour orbs behind,
 *                and a 1100px product shot that is rounded on top, has NO
 *                bottom border and is cropped by the fold
 *   split        a 45% heading column that STICKS at top:120px while a 55%
 *                column of cards scrolls past it. This is the signature of
 *                the whole design and the thing most obviously missing if you
 *                build it as heading-above-grid
 *   timeline     an 80px rail of 64px numbered circles joined by 1px lines,
 *                against 600px-max content
 *   bordered grid  border-t + border-l on the container, border-b + border-r
 *                on every cell, 40px cell padding. Not gaps, not cards
 *   faq          a 50/50 row: category in the left half, question in the
 *                right half, with a round button at the end
 *
 * Palette, type and motion live in landing.css. This file is only geometry.
 */

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

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.nav-col-l { width: 20%; display: flex; align-items: center; }
.nav-col-c { width: 60%; display: flex; justify-content: center; }
.nav-col-r { width: 20%; display: flex; justify-content: flex-end; }

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

.hero {
	position: relative;
	/* NOT overflow:hidden. That clipped the bottom 24px of the product shot --
	 * the hero's border box came out 24px shorter than its own scrollHeight,
	 * so the last strip of the dashboard was cut off exactly where #problem
	 * begins. The only thing that ever needed clipping was the orbs, and they
	 * now clip themselves in .hero-orbs. */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;          /* centred, not left-aligned */
	justify-content: flex-start;
	padding-top: 160px;
	/* Real bottom spacing, not 0.
	 *
	 * The product shot enters with `transform: translateY(24px)`, and a
	 * transform does not affect layout -- so .hero-inner sized itself to the
	 * UNtransformed position while the painted box sat 24px lower, straight
	 * into the hero's old `overflow: hidden`. The bottom strip of the
	 * dashboard was cut off, exactly where #problem begins. Removing the
	 * hero's overflow stopped the clipping; this stops the collision, during
	 * the entrance animation and after it. */
	padding-bottom: 100px;
	text-align: center;
}

/* Three blurred orbs behind the hero. The reference uses pastel pink, violet
 * and indigo; these are the same geometry and opacities in our own cool
 * family so they read as depth rather than as decoration from another brand. */
/* The orbs are wider than the viewport by design, so something must clip them
 * or they cause horizontal scroll. That job belongs here, not on .hero. */
.hero-orbs {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.orb {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.orb-1 { top: -10%; left: -5%; width: 500px; height: 500px; background: #d8ecf5; opacity: 0.6; filter: blur(100px); }
.orb-2 { top: 10%; right: -10%; width: 600px; height: 600px; background: #dbe7f6; opacity: 0.5; filter: blur(120px); }
.orb-3 { bottom: 30%; left: 20%; width: 400px; height: 400px; background: #e0e7ff; opacity: 0.4; filter: blur(100px); }

.hero-inner {
	position: relative;
	z-index: 10;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hero h1 { max-width: 820px; margin-left: auto; margin-right: auto; }
.hero .hero-sub { max-width: 580px; margin-left: auto; margin-right: auto; }
.hero-cta { justify-content: center; }

/* The reference crops this shot with the fold. Ours is shown WHOLE at
 * Suryansh's instruction, so the card is closed on all four sides -- an open
 * bottom edge only reads as "deliberately cut" while something is actually
 * cutting it. */
.hero-shot {
	width: 100%;
	max-width: 1100px;
	margin: 64px auto 0;
	position: relative;
	border: 1px solid rgba(22, 32, 43, 0.09);
	border-radius: 20px;
	overflow: hidden;
	background: var(--ground-white);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 -8px 40px rgba(0, 0, 0, 0.07);
}

/* --------------------------------------------------- sticky split section */

.split {
	display: flex;
	flex-direction: row;
	gap: 64px;
	align-items: flex-start;
}

.split-head {
	width: 45%;
	position: sticky;
	top: 120px;
	align-self: flex-start;
}

.split-head .section-intro { max-width: 460px; }
.split-head h2 { max-width: 100%; }

.split-body {
	width: 55%;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* A card in the scrolling column. Rounded, hairline-bordered, and the border
 * is the only thing that changes on hover. */
.stack-card {
	border: 1px solid rgba(22, 32, 43, 0.09);
	border-radius: 16px;
	padding: 28px;
	transition: border-color 0.5s ease;
}
.stack-card:hover { border-color: rgba(22, 32, 43, 0.18); }

.band-dark .stack-card { border-color: rgba(255, 255, 255, 0.07); }
.band-dark .stack-card:hover { border-color: rgba(255, 255, 255, 0.14); }

.stack-card .n {
	font-size: 13px;
	letter-spacing: 0.08em;
	color: rgba(22, 32, 43, 0.35);
	display: block;
	margin-bottom: 14px;
}
.band-dark .stack-card .n { color: rgba(255, 255, 255, 0.35); }

.stack-card h3 { margin: 0 0 10px; font-size: 24px; font-weight: 500; line-height: 1.2; }
.band-dark .stack-card h3 { color: var(--on-dark); }
.stack-card p { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(22, 32, 43, 0.62); }
.band-dark .stack-card p { color: rgba(255, 255, 255, 0.62); }

/* An accent rule under the sticky heading, as the reference has. */
.split-rule {
	border-left: 2px solid var(--accent);
	padding-left: 18px;
	margin-top: 34px;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(22, 32, 43, 0.6);
	max-width: 420px;
}
.band-dark .split-rule { color: rgba(255, 255, 255, 0.6); }

/* --------------------------------------------------------------- timeline */

.timeline { display: flex; flex-direction: column; }

.tl-row { display: flex; gap: 32px; position: relative; }

.tl-rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	width: 80px;
}

.tl-num {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: 1px solid rgba(22, 32, 43, 0.14);
	font-size: 18px;
	font-weight: 500;
	color: var(--ink);
	background: var(--ground-white);
}
.band-dark .tl-num { border-color: rgba(255, 255, 255, 0.2); color: var(--on-dark); background: transparent; }
.band-grey .tl-num { background: var(--ground-white); }

.tl-line { width: 1px; flex: 1; min-height: 40px; background: rgba(22, 32, 43, 0.14); }
.band-dark .tl-line { background: rgba(255, 255, 255, 0.18); }

.tl-body { flex: 1; max-width: 600px; padding-bottom: 56px; }
.tl-row:last-child .tl-body { padding-bottom: 0; }

.tl-body h3 { margin: 14px 0 10px; font-size: 28px; font-weight: 500; line-height: 1.2; }
.band-dark .tl-body h3 { color: var(--on-dark); }
.tl-body p { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(22, 32, 43, 0.62); }
.band-dark .tl-body p { color: rgba(255, 255, 255, 0.62); }

/* ---------------------------------------------------------- centred head */

.center-head { text-align: center; margin-bottom: 64px; }
.center-head h2 { max-width: 100%; margin: 0 auto; }
.center-head .section-intro { max-width: 480px; margin-left: auto; margin-right: auto; }
.center-head .eyebrow { margin-bottom: 32px; }   /* matches the bare .eyebrow; it outranks it on specificity */

/* ------------------------------------------------------- bordered grid */

/* Border on the container's top and left, then bottom and right on every
 * cell. That is what produces one continuous hairline table rather than a
 * set of separated cards -- and it is why there is no gap anywhere. */
.bgrid {
	display: grid;
	border-top: 1px solid rgba(22, 32, 43, 0.08);
	border-left: 1px solid rgba(22, 32, 43, 0.08);
}
.band-dark .bgrid { border-top-color: rgba(255, 255, 255, 0.08); border-left-color: rgba(255, 255, 255, 0.08); }

.bgrid-2 { grid-template-columns: repeat(2, 1fr); }
.bgrid-3 { grid-template-columns: repeat(3, 1fr); }
.bgrid-4 { grid-template-columns: repeat(4, 1fr); }

.bcell {
	border-bottom: 1px solid rgba(22, 32, 43, 0.08);
	border-right: 1px solid rgba(22, 32, 43, 0.08);
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	transition: background 0.4s ease;
}
.band-dark .bcell { border-bottom-color: rgba(255, 255, 255, 0.08); border-right-color: rgba(255, 255, 255, 0.08); }

.bcell:hover { background: rgba(22, 32, 43, 0.02); }
.band-dark .bcell:hover { background: rgba(255, 255, 255, 0.03); }

/* number and title share a baseline, as the reference does */
.bcell-head { display: flex; align-items: baseline; gap: 16px; }

.bcell-head .n {
	font-size: 14px;
	color: rgba(22, 32, 43, 0.3);
	flex: none;
	font-variant-numeric: tabular-nums;
}
.band-dark .bcell-head .n { color: rgba(255, 255, 255, 0.3); }

.bcell h3 { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.25; }
.band-dark .bcell h3 { color: var(--on-dark); }
.bcell p { margin: 0; font-size: 15.5px; line-height: 1.5; color: rgba(22, 32, 43, 0.6); }
.band-dark .bcell p { color: rgba(255, 255, 255, 0.6); }

/* -------------------------------------------------------- quote section */

.quote-wide { max-width: 900px; }

.quote-cols { display: flex; flex-direction: row; gap: 48px; margin-top: 48px; }
.quote-cols > div { width: 50%; }
.quote-cols p { max-width: 520px; margin: 0; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.62); }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 72px; }

.stat-cell {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding: 28px 28px 0 0;
}
.stat-cell .n { font-size: 14px; color: rgba(255, 255, 255, 0.3); display: block; margin-bottom: 12px; }
.stat-cell h3 { margin: 0 0 8px; font-size: 22px; font-weight: 500; color: var(--on-dark); }
.stat-cell p { margin: 0; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }

/* ------------------------------------------------------------------ faq */

.faq-list { display: flex; flex-direction: column; }
.faq-head-rule { border-bottom: 1px solid rgba(22, 32, 43, 0.2); }

.faq-item { border-bottom: 1px solid rgba(22, 32, 43, 0.2); }

.faq-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 30px;
	padding-bottom: 30px;
	cursor: pointer;
	list-style: none;
	gap: 24px;
}
.faq-row::-webkit-details-marker { display: none; }

.faq-left { width: 50%; display: flex; align-items: center; }
.faq-left .cat {
	width: 40%;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(22, 32, 43, 0.4);
}

.faq-right { width: 50%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.faq-right .q { font-size: 22px; font-weight: 500; line-height: 1.3; color: var(--ink); }

.faq-btn {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	transition: background 0.35s ease, color 0.35s ease;
}
.faq-item[open] .faq-btn { background: var(--ink); color: var(--ground-white); }

.faq-answer { padding: 0 0 34px; display: flex; }
.faq-answer .spacer { width: 50%; flex: none; }
.faq-answer p {
	width: 50%;
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: rgba(22, 32, 43, 0.62);
}

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

/* Pricing has no equivalent in the reference, so it is built from the same
 * bordered-grid vocabulary rather than inventing a third card style. */
.plan-cell { justify-content: flex-start; gap: 14px; }
.plan-cell.featured { background: var(--ground-dark); }
.plan-cell.featured h3, .plan-cell.featured .amount { color: var(--on-dark); }
.plan-cell.featured .term, .plan-cell.featured .unit { color: rgba(255, 255, 255, 0.55); }
.plan-cell.featured .save { color: rgba(255, 255, 255, 0.72); border-top-color: rgba(255, 255, 255, 0.2); }
.plan-cell.featured:hover { background: var(--ground-dark); }

.plan-cell .term { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(22, 32, 43, 0.45); }
.plan-cell .amount { font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.plan-cell .unit { font-size: 14.5px; color: rgba(22, 32, 43, 0.5); }
.plan-cell .save {
	font-size: 15px; line-height: 1.45; color: rgba(22, 32, 43, 0.62);
	border-top: 1px solid rgba(22, 32, 43, 0.1); padding-top: 14px; margin-top: auto;
}
.plan-cell .tag {
	align-self: flex-start; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
	padding: 4px 11px; border-radius: 40px; background: var(--up); color: #fff;
}

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

@media (max-width: 1024px) {
	.hero { padding-bottom: 60px; }
	.split { flex-direction: column; gap: 40px; }
	.split-head, .split-body { width: 100%; position: static; }
	.bgrid-4 { grid-template-columns: repeat(2, 1fr); }
	.quote-cols { flex-direction: column; gap: 28px; }
	.quote-cols > div { width: 100%; }
	.hero { padding-top: 120px; }
}

@media (max-width: 768px) {
	.hero { padding-top: 90px; padding-bottom: 40px; }
	.nav-col-c { display: none; }
	.nav-col-l, .nav-col-r { width: auto; }
	.bgrid-2, .bgrid-3, .bgrid-4 { grid-template-columns: 1fr; }
	.bcell { padding: 28px; border-right: 0; }
	.band-dark .bcell { border-right: 0; }
	.stat-row { grid-template-columns: 1fr; gap: 0; }
	.stat-cell { padding-right: 0; }
	.tl-row { gap: 20px; }
	.tl-rail { width: 48px; }
	.tl-num { width: 48px; height: 48px; font-size: 15px; }
	.tl-body h3 { font-size: 22px; }
	.tl-body { padding-bottom: 36px; }
	.faq-left { display: none; }
	.faq-right { width: 100%; }
	.faq-right .q { font-size: 19px; }
	.faq-btn { width: 42px; height: 42px; font-size: 10px; }
	.faq-answer .spacer { display: none; }
	.faq-answer p { width: 100%; font-size: 16px; }
	.hero-shot { margin-top: 44px; border-radius: 14px; }
	.orb-1, .orb-2 { width: 300px; height: 300px; filter: blur(70px); }
	.orb-3 { width: 200px; height: 200px; filter: blur(60px); }
	.stack-card { padding: 20px; }
	.stack-card h3 { font-size: 20px; }
}

@media (max-width: 400px) {
	.orb-1, .orb-2 { width: 220px; height: 220px; filter: blur(60px); }
	.orb-3 { width: 160px; height: 160px; filter: blur(50px); }
	.bcell { padding: 24px; }
}

/* ================================================ exact type from the reference
 *
 * Measured off the live DOM rather than approximated. These override the
 * earlier approximations in landing.css deliberately -- this file loads second.
 *
 * Tailwind translations used below: tracking-tight = -0.025em, mb-8 = 32px,
 * mb-10 = 40px, mb-12 = 48px, text-xs = 12px.
 */

/* Eyebrow: 11px at 0.25em tracking, and much fainter than a normal label --
 * 25% on light, 30% on dark. It is a whisper above the heading, not a chip. */
.eyebrow {
	font-size: 11px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: rgba(22, 32, 43, 0.25);
	margin: 0 0 32px;
}
.band-dark .eyebrow { color: rgba(255, 255, 255, 0.3); }
@media (max-width: 400px) { .eyebrow { font-size: 10px; margin-bottom: 20px; } }
@media (min-width: 401px) and (max-width: 768px) { .eyebrow { margin-bottom: 24px; } }

/* H1: 76px / leading 1 / -2.5px, semibold. The faded second line is 35%,
 * noticeably stronger than the 20% used on section headings. */
h1 {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 76px;
	line-height: 1;
	letter-spacing: -2.5px;
}
h1 .muted { color: rgba(22, 32, 43, 0.35); }

@media (min-width: 1025px) and (max-width: 1490px) { h1 { font-size: 64px; } }
@media (min-width: 769px) and (max-width: 1024px) { h1 { font-size: 52px; } }
@media (min-width: 401px) and (max-width: 768px) { h1 { font-size: 40px; letter-spacing: -1.5px; } }
@media (max-width: 400px) { h1 { font-size: 32px; letter-spacing: -1px; } }

/* H2: 40px base, but 3.5vw from 1025px up -- so section headings GROW with the
 * viewport on a large monitor. Fixing them at 40px, as the first build did, is
 * invisible on a laptop and obviously wrong on a 1440p screen. */
h2 {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 40px;
	line-height: 1.1;
	letter-spacing: -0.025em;
}
@media (min-width: 1025px) { h2 { font-size: 3.5vw; } }
@media (min-width: 769px) and (max-width: 1024px) { h2 { font-size: 50px; } }
@media (min-width: 401px) and (max-width: 768px) { h2 { font-size: 30px; } }
@media (max-width: 400px) { h2 { font-size: 26px; } }

h2 .fade { color: rgba(22, 32, 43, 0.2); }
.band-dark h2 { color: var(--on-dark); }
.band-dark h2 .fade { color: rgba(255, 255, 255, 0.65); }
.band-dark h2.lead-fade { color: rgba(255, 255, 255, 0.65); }
.band-dark h2.lead-fade .fade { color: var(--on-dark); }

.band-dark .center-head h2, .band-dark .split-head h2 { margin-bottom: 0; }

/* The nav wordmark is NeueMontreal, not the display face. FoundersGrotesk is
 * reserved for the two giant pieces of type below and nowhere else. */
.nav-word { font-family: var(--font-body); font-weight: 600; }

/* --------------------------------------------- the two display-face blocks */

/* The waitlist call: 170px on 140px leading, centred, bold. */
.wl-type {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 170px;
	line-height: 140px;
	letter-spacing: -2.5px;
	text-align: center;
	text-transform: none;
	margin: 0 0 60px;
	color: var(--on-dark);
}
.wl-type span { display: block; }
.wl-type span:nth-child(2) { color: rgba(255, 255, 255, 0.45); }

@media (min-width: 1025px) and (max-width: 1490px) { .wl-type { font-size: 150px; line-height: 120px; } }
@media (min-width: 769px) and (max-width: 1024px) { .wl-type { font-size: 110px; line-height: 90px; } }
@media (min-width: 401px) and (max-width: 768px) { .wl-type { font-size: 80px; line-height: 70px; } }
@media (max-width: 400px) { .wl-type { font-size: 60px; line-height: 50px; } }

/* The footer wordmark: 150px on 115px leading, uppercase, semibold. A whole
 * structural element the first build simply did not have. */
.foot-word {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 150px;
	line-height: 115px;
	text-transform: uppercase;
	color: var(--on-dark);
	margin: 0 0 40px;
	letter-spacing: -0.02em;
}

@media (min-width: 1025px) and (max-width: 1490px) { .foot-word { font-size: 130px; line-height: 98px; } }
@media (min-width: 769px) and (max-width: 1024px) { .foot-word { font-size: 100px; line-height: 75px; } }
@media (min-width: 401px) and (max-width: 768px) { .foot-word { font-size: 74px; line-height: 68px; } }
@media (max-width: 400px) { .foot-word { font-size: 56px; line-height: 50px; } }

.foot-tagline {
	font-size: 17px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.55);
	max-width: 620px;
	margin: 0 0 64px;
}

/* The round FAQ button label is text-xs bold uppercase. */
.faq-btn { font-size: 12px; font-weight: 700; }

/* Real product screenshots replaced the placeholder frames. They are captured
 * at 1270x668, so width/height are declared to reserve the space and stop the
 * page reflowing as they decode -- on a marketing page the layout shifting
 * under a reader is the cheapest possible way to look unfinished. */
.hero-shot img { display: block; width: 100%; height: auto; }

.shot img {
	display: block;
	width: 100%;
	height: auto;
	border-bottom: 1px solid rgba(22, 32, 43, 0.09);
}

/* Screenshots are shown WHOLE. An earlier version cropped these to a shared
 * 16:10 with object-fit:cover so the three cards would line up; the captures
 * are 2.10:1, 1.80:1 and 1.60:1, so that quietly ate the bottom quarter of the
 * dashboard -- including the "Currently down" table, which is the single most
 * persuasive thing on the screen. Tidy cards are not worth cropping the
 * evidence out of the evidence.
 *
 * The cards are therefore different heights. They top-align, and the captions
 * carry a floor so the shorter ones do not look truncated. */
/* All three cards are the same size, and no screenshot is cropped to get there.
 *
 * The captures are 2.105:1, 1.796:1 and 1.600:1 -- naturally different heights.
 * Cropping them to a common ratio with object-fit:cover is what an earlier
 * version did, and it ate the bottom quarter of the dashboard. So instead they
 * are CONTAINED in a common 16:10 box, which is exactly shot-reports' own
 * ratio, so that one fills it edge to edge and the other two letterbox.
 *
 * The letterbox is invisible: every capture's page background is pure #ffffff
 * (sampled -- 4800+ of the sampled edge pixels in each), so the fill reads as
 * more application whitespace rather than as a band. Anchored to the top, so
 * the empty space falls below the content where a real dashboard has it.
 *
 * Setting an explicit ratio here is safe. The thing that broke this before was
 * `aspect-ratio: auto`, which strips the ratio the UA derives from the
 * width/height attributes and collapses the box to 1px. An explicit ratio
 * reserves the space just as well. */
.shot img {
	aspect-ratio: 16 / 10;
	object-fit: contain;
	object-position: top center;
	background: #ffffff;
	height: auto;
}

.shots { align-items: start; }
.shot .cap { min-height: 108px; }

/* Equal images + a caption floor = three cards of identical height. */
.shots { align-items: stretch; }
.shot { height: 100%; }

/* The hero shot is shown whole too. Same rule: no aspect-ratio override. */
.hero-shot img { height: auto; }