/* Hallmark · shape: Workbench · genre: modern-minimal · theme: brand · redesign: full · job: sign up (apply), the action in the hero and the form at the close
 * paper: oklch(99.4% 0.002 286) · accent: oklch(54.5% 0.245 293) · display: Instrument Sans · body: Inter · hero: Stage · nav: edge-aligned, a wordmark and one action · footer: colophon · signature: the real EpicSocial pipeline, full size, in the hero
 * axes: light/grotesk-sans/chromatic-violet · posture: accent on actions only · contrast: pass · fold: pass · imagery: screenshots 5 (production, read-only capture) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: P, the page argues one thing only (you approve every post); kept it as the hero line and let the screens prove it */
/* Hallmark · dismissed 58 · the deal table and the application questions are the owner's terms, kept as written */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Inter"; src: url("fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root { --display-weight: 600; --tracking-display: -0.025em; --nav-h: 72px; }

/* nav */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: color-mix(in oklab, var(--color-paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav .container { display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-h); }
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.01em; text-decoration: none; color: var(--color-ink); }
.wordmark:hover { color: var(--color-ink-2); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); }
.wordmark svg { width: 26px; height: 26px; flex: none; } /* agent_team E65-S5: logo C, the S for EpicSocial */
.wordmark:active { color: var(--color-ink); }

/* controls: eight states */
.btn { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-input); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--small { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.textlink { color: var(--color-accent-2); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--color-accent) 40%, transparent); }
.textlink:hover { text-decoration-color: currentColor; }
.textlink:active { color: var(--color-ink); }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear; } }

/* screenshots */
.shot { margin: 0; }
.shot img { width: 100%; height: auto; background: var(--color-paper-2); border-radius: var(--radius-card); outline: 1px solid color-mix(in oklab, var(--color-ink) 9%, transparent); outline-offset: -1px; box-shadow: 0 1px 2px color-mix(in oklab, var(--color-ink) 6%, transparent), 0 24px 48px -24px color-mix(in oklab, var(--color-ink) 22%, transparent); }
figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); max-width: 60ch; }

/* hero */
.hero { min-height: calc(100svh - var(--nav-h)); display: grid; align-content: center; padding-block: var(--space-2xl); }
.hero .container { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); align-items: center; }
.hero h1 { max-width: 13ch; font-size: var(--text-display-s); }
.hero .lead { margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 34ch; }
.places { margin-top: var(--space-md); font-size: var(--text-md); font-weight: 600; color: var(--color-accent-2); max-width: 40ch; } /* agent_team E46-S18: the 5 places, from the console's count */
.places--full { color: var(--color-ink); }
.hero .actions { margin-top: var(--space-xl); display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.hero .shot { margin-right: calc(var(--gutter) * -1); }

/* section rhythm */
.section { padding-block: var(--section-gap) 0; }
.section--tight { padding-block: var(--section-gap-s) 0; }
.head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.head .lead { color: var(--color-ink-2); }

/* how a post is made */
.made { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns) var(--gap-columns); }
.made .lead-shot { grid-column: 1 / -1; }
.made ol { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); counter-reset: step; }
.made li { counter-increment: step; border-top: var(--rule-hair) solid var(--color-ink); padding-top: var(--space-md); }
.made li::before { content: counter(step); display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); color: var(--color-accent); line-height: 1; margin-bottom: var(--space-sm); }
.made li h3 { margin-bottom: var(--space-xs); }
.made li p { color: var(--color-ink-2); }
.pair { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap-columns); align-items: end; margin-top: var(--space-2xl); }
.pair .phone { max-width: 320px; justify-self: end; width: 100%; }

/* the team */
.team { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.team li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.team li p { font-size: var(--text-lead); color: var(--color-ink-2); max-width: 52ch; }
.team-note { margin-top: var(--space-lg); color: var(--color-ink-2); }

/* the deal */
.deal { width: 100%; border-collapse: collapse; }
.deal th { width: 30%; text-align: left; vertical-align: top; padding: var(--space-lg) var(--gap-columns) var(--space-lg) 0; font: 600 var(--text-title)/1.25 var(--font-display); color: var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-rule); }
.deal td { padding: var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); font-size: var(--text-lg); line-height: 1.5; }
.deal ul { margin: 0; padding-left: var(--space-lg); }
.deal li + li { margin-top: var(--space-2xs); }

/* the price band */
.band { margin-top: var(--section-gap); background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); padding-block: var(--section-gap-s); }
.band .container { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: center; }
.price { font-variant-numeric: tabular-nums; font-family: var(--font-display); font-weight: 600; font-size: var(--text-display); line-height: 1; letter-spacing: var(--tracking-display); margin: 0; }
.price-unit { font-variant-numeric: tabular-nums; display: block; font-size: var(--text-section); color: var(--color-ink-2); margin-top: var(--space-sm); }
.band p { font-size: var(--text-lead); color: var(--color-ink-2); }
.band p + p { margin-top: var(--space-md); }

/* the application */
.apply .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.apply .aside > p { color: var(--color-ink-2); margin-top: var(--space-md); }
.apply .aside h3 { margin-top: var(--space-xl); }
form { background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-xl); }
label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); margin: var(--space-lg) 0 var(--space-xs); }
label:first-of-type { margin-top: 0; }
input[type=email], input[type=text], input:not([type]), textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); border: 1px solid var(--color-muted); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); transition: border-color var(--dur-short) var(--ease-out); }
input:hover, textarea:hover { border-color: var(--color-ink-2); }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-accent); }
input:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }
input:user-invalid { border-color: var(--color-error); }
textarea { min-height: 112px; resize: vertical; }
fieldset { border: 0; padding: 0; margin: var(--space-xl) 0 0; }
legend { font-family: var(--font-display); font-weight: 600; font-size: var(--text-title); color: var(--color-ink); padding: 0; margin-bottom: var(--space-xs); }
.q { display: flex; gap: var(--space-md); align-items: flex-start; justify-content: space-between; padding: var(--space-md) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.q:first-of-type { border-top: 0; }
.q p { margin: 0; font-size: var(--text-md); color: var(--color-ink); max-width: 46ch; }
.yn { display: flex; gap: var(--space-xs); flex-shrink: 0; }
.yn label { margin: 0; font-weight: 500; display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 40px; padding: 0 var(--space-md) 0 var(--space-sm); border: 1px solid var(--color-muted); border-radius: var(--radius-input); cursor: pointer; font-size: var(--text-sm); transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.yn input { margin: 0; width: 16px; height: 16px; accent-color: var(--color-accent); cursor: pointer; }
.yn input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.yn label:hover { border-color: var(--color-ink-2); }
.yn label:has(input:checked) { background: var(--color-accent-wash); border-color: var(--color-accent); color: var(--color-accent-2); }
.yn label:active { transform: translateY(1px); }
.yn input:disabled { cursor: not-allowed; }
.submit { margin-top: var(--space-xl); }
.small { font-size: var(--text-sm); color: var(--color-ink-2); margin-top: var(--space-md); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.msg { display: none; border-radius: var(--radius-card); padding: var(--space-lg); margin-bottom: var(--space-lg); }
.msg p, .msg li { font-size: var(--text-md); color: var(--color-ink); }
.msg ol { margin: var(--space-xs) 0; padding-left: var(--space-lg); }
.ok { background: color-mix(in oklab, var(--color-success) 9%, var(--color-paper)); border: 1px solid var(--color-success); }
.err { background: color-mix(in oklab, var(--color-error) 8%, var(--color-paper)); border: 1px solid var(--color-error); }

/* footer */
.foot { margin-top: var(--section-gap); border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-2xl); }
.foot p { color: var(--color-ink-2); font-size: var(--text-sm); max-width: 70ch; }
.foot p + p { margin-top: var(--space-xs); }

@media (max-width: 60rem) {
  .hero { min-height: 0; padding-block: var(--space-2xl) var(--section-gap-s); }
  .hero .container, .head, .band .container, .apply .container, .pair { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hero .shot { margin-right: 0; }
  .made ol { grid-template-columns: minmax(0, 1fr); }
  .team li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .deal th, .deal td { display: block; width: 100%; padding-right: 0; }
  .deal th { border-bottom: 0; padding-bottom: var(--space-2xs); }
  .pair .phone { justify-self: start; }
}
@media (max-width: 40rem) {
  form { padding: var(--space-lg); }
  .q { flex-direction: column; gap: var(--space-sm); }
}