/* Polyment landing v2, Step 1: the home-page hero, direction A (headline A), and the form styles the
   other pages share. Loaded after site.css. Heroes B and C, the v1 rows and the artboards' held
   states were canvas-only and moved to docs/landing-v2/build/tools/canvas-only.css (S5, 3 Oct). */

/* Shared hero parts */
.hx { grid-column: 1 / -1; position: relative; padding: clamp(28px, 4.2vw, 60px) 0 clamp(40px, 4.6vw, 64px); border-bottom: 1px solid var(--line); }
.hx-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.hx-status { grid-area: status; margin: 0 0 14px; max-width: 62ch; font-size: .90625rem; line-height: 1.45; font-weight: 600; color: var(--slate); }
.hx-title { grid-area: h1; margin: 0; font-size: var(--fs-display); line-height: 1.04; font-variation-settings: "opsz" 144; }
.hx-lead { grid-area: lead; margin: 22px 0 0; max-width: 62ch; font-size: clamp(1.0625rem, .8rem + .47vw, 1.25rem); line-height: 1.6; color: var(--slate); text-wrap: pretty; }
.hx-form { grid-area: form; position: relative; margin: 28px 0 0; max-width: 560px; }
.hx-label { display: block; margin: 0 0 8px; margin-inline-start: 2px; font-size: .875rem; line-height: 1.4; font-weight: 600; color: var(--navy); }
.hx-form .form-message { min-height: 0; margin: 0; }
.hx-form .form-message:not(:empty) { margin-top: 10px; }
.hx-watch { grid-area: watch; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: .96875rem; font-weight: 700; color: var(--verdigris-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.hx-watch:hover { text-decoration-thickness: 2.5px; }
.hx-gloss { grid-area: gloss; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; margin: 26px 0 0; }
.hx-gloss img { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--cream-surface); object-fit: cover; }
.hx-gloss p { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 1.0625rem; line-height: 1.45; color: var(--slate); }
@media (max-width: 640px) {
  .hx-status { font-size: .875rem; }
}

/* A · The map draws itself: the drawing in the margin column, Leo beside the form */
.hx-a .hx-grid { grid-template-areas: "status" "h1" "lead" "form" "terms" "trust" "watch" "art" "gloss"; }
.hx-art { grid-area: art; min-width: 0; margin: 34px 0 0; }
.hx-draw { display: block; width: 100%; height: auto; overflow: visible; }
.hx-draw--wide { display: none; }
@media (min-width: 981px) {
  .hx-a .hx-grid { grid-template-columns: minmax(0, 1fr) var(--rail-w); column-gap: clamp(36px, 4.5vw, 64px);
    grid-template-areas: "status art" "h1 art" "lead art" "form gloss" "terms gloss" "trust gloss" "watch gloss"; }
  .hx-a .hx-art { margin: 0; align-self: center; }
  .hx-draw--wide { display: block; }
  .hx-a .hx-gloss { align-self: start; margin-top: 50px; }
}
.hx-draw .pe { fill: none; stroke: var(--graphite-soft); stroke-width: 1.25; stroke-linecap: round; }
.hx-draw .route-pencil { fill: none; stroke: var(--graphite-soft); stroke-width: 1.5; stroke-linecap: round; }
.hx-draw .ink { fill: none; stroke: var(--verdigris); stroke-width: 2.5; stroke-linecap: round; }
.hx-draw .ring { fill: var(--cream-surface); stroke: var(--verdigris); stroke-width: 1.75; }
.hx-draw .pc .ring { fill: var(--cream); stroke: var(--graphite-soft); stroke-width: 1.5; stroke-dasharray: 3 4; }
.hx-draw .gl { font-family: var(--font-serif); font-weight: 600; font-size: 17px; text-anchor: middle; dominant-baseline: central; fill: var(--verdigris-ink); }
.hx-draw .gl-sm { font-size: 14px; }
.hx-draw .pc .gl { fill: var(--graphite); font-weight: 500; }
.hx-draw .lbl { font-family: var(--font-sans); font-weight: 600; font-size: 13px; text-anchor: end; fill: var(--slate); }
.hx-draw .halo { fill: var(--gold-wash); }
.hx-draw .leaf { fill: url(#goldleaf); stroke: var(--gold); stroke-width: 1.5; }
.hx-draw .n1 .gl { fill: var(--navy); }
.hx-draw .flourish { fill: var(--gold); }
.hx-draw .outer { fill: none; stroke: var(--navy); stroke-width: 1.25; }
.hx-draw .core { fill: url(#coreink); }
.hx-draw .gl-core { font-family: var(--font-serif); font-weight: 600; font-size: 24px; text-anchor: middle; dominant-baseline: central; fill: var(--cream); }
.hx-draw .gl-core-sm { font-size: 19px; }
.hx-draw .dlbl { font-family: var(--font-serif); font-weight: 500; font-size: 17px; text-anchor: end; fill: var(--navy); }
.hx-draw .dlbl-sm { font-size: 15px; }
.hx-draw .me-dot { fill: var(--verdigris); }
.hx-draw .me-ring { fill: none; stroke: var(--verdigris); stroke-width: 1.5; opacity: .45; }
.hx-draw .nd, .hx-draw .gild { transform-box: fill-box; transform-origin: center; }

/* The drawing's orchestrated moment: pencil, then the path inks, then one node gilds. These rules play
   once and end at rest. On the home page (.v2-hero) the pencil lines and the nodes still draw once from
   here, while home-v2.css runs the inked and gilded parts on an endless 7 s cycle (kept looping, 3 Oct);
   js/site.js holds it off screen and offers Pause. */
@keyframes hx-line { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hx-appear { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } }
@keyframes hx-ring-ink { from { stroke: var(--graphite-soft); fill: var(--cream); } to { stroke: var(--verdigris); fill: var(--cream-surface); } }
@keyframes hx-gl-ink { from { fill: var(--graphite); } to { fill: var(--verdigris-ink); } }
@keyframes hx-gl-gild { from { fill: var(--verdigris-ink); } to { fill: var(--navy); } }
@keyframes hx-gild { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.is-playing .hx-draw .pe, .is-playing .hx-draw .route-pencil { stroke-dasharray: 1; animation: hx-line .6s ease-out var(--t, 0s) both; }
.is-playing .hx-draw .route-pencil { animation-duration: .8s; }
.is-playing .hx-draw .ink { stroke-dasharray: 1; animation: hx-line 1s cubic-bezier(.45, 0, .25, 1) .9s both; }
.is-playing .hx-draw .nd { animation: hx-appear .45s cubic-bezier(.2, .7, .2, 1) var(--a, 0s) both; }
.is-playing .hx-draw .pn .ring { animation: hx-ring-ink .3s ease var(--t, 1s) both; }
.is-playing .hx-draw .pn .gl { animation: hx-gl-ink .3s ease var(--t, 1s) both; }
.is-playing .hx-draw .n1 .gl { animation: hx-gl-ink .3s ease var(--t, 1s) both, hx-gl-gild .35s ease 2.05s forwards; }
.is-playing .hx-draw .gild { animation: hx-gild .5s cubic-bezier(.2, .7, .2, 1) var(--g, 1.95s) both; }
@media (prefers-reduced-motion: reduce) {
  .hx-art .hx-draw, .hx-art .hx-draw * { animation: none !important; }
}