/* Hallmark · shape: Studio Proof Sheet · genre: editorial · theme: Studio (deal 1/3, seed small-web-studio-offer-88b7·28e0238a·2026-10-27·r0) · job: hire · draw: manual
 * hero: Banner, the promise over the visitor's own future address set huge · nav: wordmark and one WhatsApp link · footer: wordmark, the fair, croscor.com · imagery: the product (screenshots of the three demo sites) · signature: tunegocio.croscor.com set as a wordmark on the proof grid, the demos as crop-marked sheets
 * axes: light/roman-serif/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: S, an offer page can read like any agency; it leads with the visitor's own address and the real demos made at the fair, and the prices are the fair's own */
/* Hallmark · dismissed 58 · the h1 is the coordinator's own offer line, eight words, and the 81 words at y 2800 are the four priced offers */
/* Hallmark · dismissed F20 · the five demos sit in one row of five at 1440, even ones dropped by 96px */
/* Theme deviation, controls: Pavel's DESIGN-RULES ban filled call-to-action blocks, so the primary is the theme's printed 1px control without the orange fill; orange stays a construction line */
@import url("./tokens.css");
@import url("./base.css");

:root { --fab: 60px; }

body { color: var(--color-ink-2); font-size: 1.0625rem; }
h1, h2, h3 { font-optical-sizing: auto; line-height: 1.02; }

.proof { background-image: radial-gradient(circle at 1px 1px, var(--color-dot) 1px, transparent 1.4px); background-size: 24px 24px; }

/* crop marks */
.crop { position: relative; --l: 8px; --o: 12px; }
.crop::before { content: ""; position: absolute; inset: calc(-1 * var(--o)); pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--color-mark), var(--color-mark)) 0 var(--o) / var(--l) 1px no-repeat,
    linear-gradient(var(--color-mark), var(--color-mark)) var(--o) 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--color-mark), var(--color-mark)) 100% var(--o) / var(--l) 1px no-repeat,
    linear-gradient(var(--color-mark), var(--color-mark)) calc(100% - var(--o)) 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--color-mark), var(--color-mark)) 0 calc(100% - var(--o)) / var(--l) 1px no-repeat,
    linear-gradient(var(--color-mark), var(--color-mark)) var(--o) 100% / 1px var(--l) no-repeat,
    linear-gradient(var(--color-mark), var(--color-mark)) 100% calc(100% - var(--o)) / var(--l) 1px no-repeat,
    linear-gradient(var(--color-mark), var(--color-mark)) calc(100% - var(--o)) 100% / 1px var(--l) no-repeat; }

/* top */
.top { border-bottom: var(--rule-hair) solid var(--color-rule); }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 64px; }
.wordmark { font: 400 1.5rem/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; }

/* controls */
.ic { width: 1.125em; height: 1.125em; flex: none; transition: transform var(--dur-short) var(--ease-out); }
.link { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; font: 500 0.9375rem/1.2 var(--font-body); color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 0.3em; white-space: nowrap; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.link:hover { text-decoration-color: var(--color-accent); }
.link:hover .ic, .btn:hover .ic { transform: translateX(3px); }
.link:active { color: var(--color-ink-2); }
.btn { position: relative; display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 52px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: 2px; background: var(--color-paper-hi); color: var(--color-ink); font: 500 1rem/1.2 var(--font-body); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.btn::after { content: ""; position: absolute; inset: 2px; border: var(--rule-hair) solid var(--color-mark); border-radius: 1px; pointer-events: none; }
.btn:hover { background: var(--color-ink); color: var(--color-paper); }
.btn:active { background: var(--color-ink-2); color: var(--color-paper); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xl); }

/* hero */
.hero { padding-block: var(--space-2xl) var(--space-3xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.hero h1 { font-size: clamp(2.75rem, 6vw + 1rem, 6rem); max-width: 14ch; }
.hero .lead { margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 34ch; }
.address { margin: var(--space-3xl) 0 0; }
.address__line { font: 400 clamp(1.9rem, 8.6vw, 7.25rem)/1.1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-muted); white-space: nowrap; text-decoration: underline 1px var(--color-accent); text-decoration-skip-ink: none; text-underline-offset: 0.06em; max-width: none; }
.address__name { color: var(--color-ink); }
.address figcaption { margin-top: var(--space-md); font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-muted); }

/* sections */
.sect { padding-block: var(--section-gap-s); }
.sect--flush { padding-top: 0; }
.sect--paper2 { background: var(--color-paper-2); }
.head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-2xl); }
.head__line { font-size: var(--text-lead); line-height: 1.4; max-width: 36ch; }

/* demos */
.demos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xl); }
.demo__link { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; column-gap: var(--space-lg); color: inherit; text-decoration: none; }
.sheet { display: block; grid-row: 1 / span 3; border-radius: var(--radius-card); box-shadow: var(--shadow-sheet); background: var(--color-paper-hi); }
.sheet img { border-radius: var(--radius-card); width: 100%; height: auto; transition: transform var(--dur-long) var(--ease-out); }
.demo__title { font: 400 var(--text-2xl)/1.05 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.15em; transition: text-decoration-color var(--dur-short) var(--ease-out); align-self: end; }
.demo__line { margin-top: var(--space-xs); color: var(--color-ink-2); }
.demo__link:hover .demo__title { text-decoration-color: var(--color-accent); }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.steps li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: var(--space-md); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.steps__n { grid-row: 1 / span 2; font: 400 3.25rem/0.9 var(--font-display); color: var(--color-ink); font-variant-numeric: lining-nums; }
.steps h3 { font-size: var(--text-2xl); }
.steps p { margin-top: var(--space-2xs); }

/* offer */
.set { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.set > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.offer h3 { font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem); }
.offer li p:not(.price) { margin-top: var(--space-xs); max-width: 46ch; }
.price { font: 400 clamp(2rem, 2vw + 1.25rem, 3rem)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.price small { font: 500 var(--text-sm)/1 var(--font-body); color: var(--color-muted); letter-spacing: 0; }
.price--ask { font: 500 1rem/1.2 var(--font-body); }
.price--ask a { display: inline-flex; min-height: 44px; align-items: center; color: var(--color-ink); text-decoration-color: var(--color-accent); text-underline-offset: 0.3em; }

/* extras */
.extras { display: grid; gap: var(--space-lg); }
.xt { width: 100%; border-collapse: collapse; border-top: var(--rule-hair) solid var(--color-ink); }
.xt th, .xt td { padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; vertical-align: baseline; }
.xt th { font-weight: 400; color: var(--color-ink); padding-right: var(--space-md); }
.xt td { text-align: right; white-space: nowrap; font-weight: 500; color: var(--color-ink); font-variant-numeric: tabular-nums; }

/* ink band */
.band { background: var(--color-ink); color: var(--color-paper); padding-block: var(--section-gap-s); }
.band h2 { color: var(--color-paper); }
.band__line { margin-top: var(--space-md); font-size: var(--text-lead); max-width: 30ch; }
.band__in { display: grid; gap: var(--space-xl); }
.band__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.btn--onink { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-paper); }
.btn--onink::after { border-color: color-mix(in oklab, var(--color-paper) 45%, transparent); }
.btn--onink:hover { background: var(--color-paper); color: var(--color-ink); }
.link--onink { color: var(--color-paper); text-decoration-color: color-mix(in oklab, var(--color-paper) 45%, transparent); }
.link--onink:active { color: var(--color-paper-3); }
.band :focus-visible { outline-color: var(--color-paper); }

/* footer */
.foot { padding-block: var(--space-2xl) calc(var(--fab) + var(--space-2xl)); }
.foot__in { display: grid; gap: var(--space-sm); justify-items: start; }
.foot__line { font-size: var(--text-sm); color: var(--color-muted); max-width: 46ch; }

/* floating WhatsApp */
.wa-float { position: fixed; z-index: var(--z-sticky); right: max(var(--space-md), env(safe-area-inset-right)); bottom: max(var(--space-md), env(safe-area-inset-bottom)); width: var(--fab); height: var(--fab); display: grid; place-items: center; border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-paper); box-shadow: var(--shadow-sheet); transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.wa-float svg { width: 30px; height: 30px; }
.wa-float:hover { background: var(--color-ink-2); }
.wa-float:active { transform: scale(0.96); }
.wa-float:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

@media (min-width: 48rem) {
  .demos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
  .demo:nth-child(3n+2) { margin-top: var(--space-3xl); }
  .demo__link { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: 0; }
  .sheet { grid-row: auto; margin-bottom: var(--space-lg); }
  .demo__link:hover .sheet img { transform: translateY(-4px); }
  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps li { grid-template-columns: minmax(0, 1fr); border-bottom: 0; padding: var(--space-lg) var(--space-lg) var(--space-sm) 0; }
  .steps li + li { border-left: var(--rule-hair) solid var(--color-rule); padding-left: var(--space-lg); }
  .steps__n { grid-row: auto; font-size: 5rem; margin-bottom: var(--space-lg); }
  .set > li { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: baseline; column-gap: var(--gap-columns); }
  .price { justify-self: end; }
}
@media (min-width: 64rem) {
  .demos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .demo:nth-child(3n+2) { margin-top: 0; }
  .demo:nth-child(even) { margin-top: var(--space-3xl); }
  .demo__title { font-size: var(--text-xl); }
  .top__in { min-height: 76px; }
  .hero { padding-block: var(--space-3xl) var(--space-3xl); }
  .head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: var(--gap-columns); }
  .extras { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap-columns); align-items: start; }
  .band__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: var(--gap-columns); }
  .foot__in { grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: var(--space-xl); }
}