/* =============================================================================
   Page squad A: home, pricing, about, contact, 404 (pages/home.mjs, pricing.mjs,
   company.mjs, notfound.mjs), plus the form-page layout pages/checkout.mjs uses
   for /signup.

   Page-level pieces on top of assets/site.css, built only from its tokens and
   its classes: the home page's proof strip (stats and the logo row), the
   tools comparison, the ChatGPT band, the
   plan cards' badge and price note (pricing and home), the
   comparison and the form pages' layout. The checkout's chrome is in
   assets/checkout-form.css (/onboarding loads only that), the /success page's
   in site.css (.section-success).

   Contents
    2  Home: proof strip              6  Home: ChatGPT band
    3  Home: why OLODESK (comparison) 7  Pricing
    4  Home: how it works             8  Form pages (sign-up, contact)
                                      9  About
   ========================================================================== */

/* 2 ------------------------------------------------ Home: proof strip */
/* Four big numbers, then the logo row and the directory link. */
.proof-strip { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
.proof-stats { max-width: 64rem; width: 100%; margin-inline: auto; }
.proof-stats .stat-value { font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.proof-stats .stat-value small { margin-left: 0.25em; }
.connects { text-align: center; }
.connects-label { margin-bottom: 1rem; font-size: 0.875rem; color: var(--muted); }
.connects-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.625rem; max-width: 58rem; margin-inline: auto; }
.connects-meta { display: flex; justify-content: center; margin-top: 1.25rem; font-size: 0.9375rem; }

/* 3 ------------------------------------ Home: why OLODESK (comparison) */
.vs-wrap { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow); }
.vs-table { width: 100%; font-size: 0.9375rem; line-height: 1.5; }
.vs-table th, .vs-table td { padding: 0.875rem 1rem; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.vs-table thead th, .vs-table thead td { border-bottom: 1px solid var(--line); background: var(--surface-soft); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.vs-table tbody th { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.vs-table td { color: var(--muted); }
.vs-table .vs-ours { background: rgba(255, 122, 0, 0.05); color: var(--ink); }
.vs-table thead .vs-ours { background: var(--orange-soft); box-shadow: inset 0 3px 0 var(--orange); }
.vs-table tbody tr:last-child > * { border-bottom: 0; }
/* Phones: each row becomes a small block, the column names inline. */
@media (max-width: 39.99rem) {
	.vs-table, .vs-table tbody, .vs-table tr, .vs-table th, .vs-table td { display: block; }
	.vs-table thead { display: none; }
	.vs-table tbody tr { padding: 1rem 1.125rem; border-bottom: 1px solid var(--line); }
	.vs-table tbody tr:last-child { border-bottom: 0; }
	.vs-table tbody th, .vs-table td { padding: 0; border: 0; background: none; }
	.vs-table td { margin-top: 0.375rem; }
	.vs-table .vs-ours { background: none; }
	.vs-table td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--muted); }
	.vs-table td.vs-ours::before { color: var(--orange-ink); }
}

/* 4 ------------------------------------------------ Home: how it works */
.how-visual { max-width: 34rem; margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) auto 0; }

/* 7 ---------------------------------------------------------- Pricing */
/* The plan cards (here and on home; the base rules are in site.css §21). */
.pricing-hero { padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.75rem); }
/* The badge sits on the featured card's top edge, so the names keep the card's full width (one
   line at 1024px) and no card's head row grows for it. */
.plan-name { padding-right: 0; }
.plan-badge { top: 0; right: 1.5rem; z-index: 1; transform: translateY(-50%); padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--orange); color: var(--ink); font-size: 0.75rem; letter-spacing: 0.02em; box-shadow: var(--shadow-sm); }
@media (min-width: 40rem) { .plan-badge { top: 0; right: 2rem; } }
/* Under the price: what it buys (tokens), then the small print, each on its own line. */
.plan-price-note { margin: 0.75rem 0 1.5rem; }
.plan-price-tokens { display: block; font-size: 0.9375rem; color: var(--ink); }
.plan-price-tokens strong { font-weight: 600; }
.plan-price-sub { display: block; margin-top: 0.25rem; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
/* A pound or euro visitor reads site.js's note ("Prices are shown and charged in pounds..."),
   not the general currency line as well. */
.plan-footnotes:has([data-currency-note]:not([hidden])) .plan-currency { display: none; }

/* The comparison: only what differs, then what every plan includes as one list. */
#compare .compare-wrap { max-width: 60rem; margin-inline: auto; }
.compare thead th { vertical-align: bottom; }
/* With no group row under it, the head row keeps its line (site.css drops the last row's). */
.compare thead tr:last-child > * { border-bottom: 1px solid var(--line); }
.compare-actions td { padding-block: 1.25rem; border-top: 1px solid var(--line); border-bottom: 0; }
.compare-every { padding: 1.5rem 1rem 1.75rem; border-top: 1px solid var(--line); background: var(--surface-soft); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.compare-every-title { margin-bottom: 1rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.compare-every-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.625rem 2rem; }
/* The comparison on phones (compareTable({ stack: true })): no sideways scrolling. Each feature
   gets its own line, the three plans' values sit in three columns under it, and each group's
   title row repeats the plans' short names (the first group sits right under the head row).
   The buttons' row is left out: the plan cards are right above. */
.compare-plans { display: none; }
@media (max-width: 39.99rem) {
	/* clip, not visible: no scroll container, and the head cells keep the rounded corners. */
	.compare-wrap--stack { overflow: clip; }
	.compare-wrap--stack .compare { display: block; min-width: 0; font-size: 0.875rem; }
	.compare-wrap--stack .compare :is(thead, tbody) { display: block; }
	.compare-wrap--stack .compare-actions { display: none; }
	.compare-wrap--stack .compare tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.compare-wrap--stack .compare thead th { padding: 1rem 0.375rem; font-size: 0.875rem; line-height: 1.3; }
	.compare-wrap--stack .compare thead th:first-child { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
	.compare-wrap--stack .compare th[scope="row"] { grid-column: 1 / -1; position: static; min-width: 0; padding: 0.875rem 1rem 0.125rem; border-bottom: 0; }
	.compare-wrap--stack .compare td { padding: 0.375rem 0.375rem 0.875rem; overflow-wrap: anywhere; }
	.compare-wrap--stack .compare tr.compare-group { display: block; }
	.compare-wrap--stack .compare-group th { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 1.25rem 0 0.625rem; }
	.compare-wrap--stack .compare-group-name { grid-column: 1 / -1; padding-inline: 1rem; }
	.compare-wrap--stack .compare-plans { display: contents; }
	.compare-wrap--stack .compare-plans span { margin-top: 0.625rem; font-size: 0.75rem; letter-spacing: 0; text-align: center; text-transform: none; color: var(--ink); }
	.compare-wrap--stack tbody tr.compare-group:first-child .compare-plans { display: none; }
	.compare-wrap--stack .compare tbody tr:last-child > * { border-bottom: 0; }
}
@media (min-width: 40rem) {
	.compare-every { padding-inline: 1.5rem; }
	/* Equal plan columns, so the buttons under them match. */
	#compare .compare { table-layout: fixed; }
	#compare .compare thead th:first-child { width: 31%; }
}
/* The comparison's column notes ("From $30 a month"): site.css makes every span in a head cell a
   block, which would put the price (a money() span) on a line of its own. */
.compare thead th span [data-money] { display: inline; margin-top: 0; }

/* 8 ----------------------------------------- Form pages (sign-up, contact) */
/* The form first (it comes first on phones too), the notes beside it on wide screens. The one
   column is minmax(0, 1fr): an auto track grew to the contact tabs' width (358px at 320px). */
.page-form-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.page-form-aside { display: grid; gap: 1rem; align-content: start; }
.aside-card { padding: 1.5rem; }
.aside-title { margin-bottom: 0.75rem; font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--ink); }
.aside-text { font-size: 0.9375rem; color: var(--muted); }
.aside-card .link-arrow { margin-top: 0.875rem; }
.aside-rule { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--muted); }
.aside-note, .aside-more { padding-inline: 0.25rem; font-size: 0.875rem; color: var(--muted); }
.aside-steps { display: grid; gap: 0.875rem; counter-reset: aside-step; }
.aside-steps li { position: relative; padding-left: 2.25rem; font-size: 0.9375rem; line-height: 1.5; color: var(--text); counter-increment: aside-step; }
.aside-steps li::before {
	content: counter(aside-step);
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 0.375rem;
	background: var(--ink);
	color: #FFFFFF;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 600;
}
.aside-steps li:first-child::before { background: var(--orange); color: var(--ink); }
.form-intro { margin-bottom: 1.25rem; font-size: 0.9375rem; color: var(--muted); }
.form-card .tab-panel { margin-top: 1.5rem; }
.form-success-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.5rem; }
@media (min-width: 64rem) {
	.page-form-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.5rem; }
	.page-form-aside { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* 9 ---------------------------------------------------------------- About */
.about-hero .hero-visual { width: 100%; max-width: 28rem; justify-self: center; }
@media (min-width: 64rem) {
	.about-hero.hero--split .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); }
}
.about-thesis .section-head { margin-bottom: 1.75rem; }
.about-thesis .prose { max-width: none; }
.about-split { display: grid; gap: 1.25rem; }
.about-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.875rem; }
.about-card .eyebrow { margin-bottom: 0; }
.about-card-title { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem); line-height: 1.25; letter-spacing: -0.02em; }
.about-card-text { color: var(--muted); }
.about-card .actions { margin-top: auto; }
@media (min-width: 48rem) {
	.about-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}