/* Public entry pages (P4): sign-in, Free Early Access and invitation. Built on tokens.css and app.css.
   Editorial composition: large type, a bright canvas, one data-flow visual, few strong sections. */

body.public { background: var(--lk-white); }
body.public main { max-width: none; padding: 0; margin: 0; }
.public-nav {
  display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--gutter);
  max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; position: relative; z-index: 2;
}
.public-nav .links { margin-left: auto; display: flex; gap: var(--space-5); align-items: center; }
.public-nav .links a:not(.btn) { color: var(--text-secondary); text-decoration: none; font-size: var(--text-sm);
  font-weight: var(--weight-medium); position: relative; }
.public-nav .links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--lk-cyan-deep); transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out); }
.public-nav .links a:not(.btn):hover { color: var(--text); }
.public-nav .links a:not(.btn):hover::after { transform: scaleX(1); }
.public-nav .product-name { padding-left: var(--space-3); border-left: 1px solid var(--border); }
.wrap { max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.btn-large { min-height: 52px; padding: 0 var(--space-6); font-size: var(--text-md); border-radius: var(--radius-md); }
.btn-arrow::after { content: "\2192"; transition: transform var(--duration-base) var(--ease-out); }
.btn-arrow:hover::after { transform: translateX(4px); }
.fineprint { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }

/* entrance: content lifts in once; nothing waits on it */
.enter { animation: rise var(--duration-slow) var(--ease-out) both; }
.enter-2 { animation-delay: 90ms; }
.enter-3 { animation-delay: 180ms; }
.enter-4 { animation-delay: 270ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --- the centred crest (seal): the exact approved PNG, never altered. Everything around it is layout: faint rings,
   a soft halo, hairlines and space. The crest is never shown larger than its own 138 x 134 pixels. ------------- */
.lk-seal { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); }
.seal-mark { position: relative; width: 168px; height: 168px; display: grid; place-items: center; flex: none; }
.seal-mark::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(36, 183, 229, 0.14), rgba(95, 169, 194, 0.06) 55%, transparent 100%); }
.seal-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.seal-rings circle { fill: none; stroke: #C9DCE4; stroke-width: 0.8; }
.seal-rings .seal-ticks { stroke: #A9C9D6; stroke-width: 3; stroke-dasharray: 0.9 6.1; opacity: 0.7; }
.seal-crest { position: relative; display: block; width: 112px; height: 112px; object-fit: contain; background: transparent;
  filter: drop-shadow(0 10px 14px rgba(11, 18, 32, 0.14)); animation: seal-float 9s var(--ease-in-out) infinite alternate; }
.seal-name { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-size: var(--text-xs);
  font-weight: var(--weight-strong); letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-secondary);
  padding-left: 0.28em; }
.seal-name::before, .seal-name::after { content: ""; width: 28px; height: 1px; background: var(--border); }
@keyframes seal-float { from { transform: translateY(0); } to { transform: translateY(-4px); } }
/* sign-in and invitation: the seal heads the panel, centred above the form */
.auth-form .lk-seal { margin-bottom: var(--space-6); }
.auth-form .lk-seal + h2, .auth-form .lk-seal + h2 + .sub { text-align: center; }
/* Early Access: the seal opens the hero on a faint horizontal rule, like a document seal */
.ea-seal { position: relative; display: flex; justify-content: center; margin-bottom: var(--space-2); }
.ea-seal::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 84px; height: 1px;
  background: linear-gradient(90deg, transparent, #C9DCE4 22%, transparent 42%, transparent 58%, #C9DCE4 78%, transparent); }
.ea-seal .lk-seal { position: relative; }
.ea-seal .seal-mark { width: 176px; height: 176px; }
.ea-seal .seal-crest { width: 120px; height: 120px; }

/* --- Early Access hero: message left, request form right, flow visual drifting behind ------------------------- */
.ea-hero { position: relative; overflow: hidden; padding: var(--space-6) 0 var(--space-8);
  background:
    radial-gradient(52rem 30rem at 92% -10%, rgba(36, 183, 229, 0.16), transparent 62%),
    radial-gradient(38rem 24rem at 0% 110%, rgba(95, 169, 194, 0.12), transparent 60%),
    linear-gradient(180deg, var(--lk-white) 0%, var(--lk-canvas) 100%);
  border-bottom: 1px solid var(--border); }
.ea-backdrop { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ea-backdrop .atmos { position: absolute; inset: -2% -4%; width: 108%; height: 104%;
  animation: drift-x 30s var(--ease-in-out) infinite alternate;
  /* faint behind the text, fuller towards the form side: atmosphere, never competing with the copy */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.12) 30%, rgba(0, 0, 0, 0.7) 62%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.12) 30%, rgba(0, 0, 0, 0.7) 62%, #000 100%); }
.ea-backdrop .bg-cell { fill: #E6F4F9; }
.ea-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
  gap: var(--space-8); align-items: start; }
.ea-copy { padding-top: var(--space-6); }
.ea-copy h1 { font-size: var(--text-hero); line-height: var(--leading-tight); letter-spacing: -0.04em;
  font-weight: var(--weight-strong); margin: var(--space-2) 0 var(--space-4); }
.ea-copy .lede { font-size: var(--text-xl); color: var(--text); max-width: 26ch; line-height: 1.3;
  margin-bottom: var(--space-4); font-weight: var(--weight-medium); }
.hero-flow { margin: 0 0 var(--space-5) -8px; max-width: 640px; }
.hero-flow .strip { width: 100%; height: auto; }
.caps { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; gap: var(--space-2); max-width: 46ch; }
.caps li { position: relative; padding-left: var(--space-6); color: var(--text-secondary); }
.caps li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 16px; height: 16px; border-radius: 50%;
  background: var(--lk-cyan-soft); box-shadow: inset 0 0 0 1px #A9D9EA; }
.caps li::after { content: ""; position: absolute; left: 4px; top: calc(0.35em + 4px); width: 8px; height: 4px;
  border-left: 2px solid var(--lk-cyan-ink); border-bottom: 2px solid var(--lk-cyan-ink); transform: rotate(-45deg); }
.free-note { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; font-weight: var(--weight-medium); }
.ea-form .form-card { scroll-margin-top: var(--space-6); }

/* --- the data-flow visual: files -> checked data -> quality review -> prepared dataset -> analysis -> dashboard -- */
.flowviz { width: 100%; height: auto; display: block; overflow: visible; }
.flowviz .file-body { fill: var(--lk-white); stroke: #A9C9D6; stroke-width: 1.5; }
.flowviz .file-fold { fill: none; stroke: #A9C9D6; stroke-width: 1.5; }
.flowviz .file.xlsx .file-body { fill: var(--lk-cyan-soft); }
.flowviz .file-label { font: 700 13px var(--font-sans); fill: var(--lk-cyan-ink); letter-spacing: 0.04em; }
.flowviz .file { animation: bob 6s var(--ease-in-out) infinite alternate; transform-box: fill-box; }
.flowviz .file.xlsx { animation-delay: -3s; }
.flowviz .flow-line { fill: none; stroke: var(--lk-cyan); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 10;
  animation: flow 2.6s linear infinite; opacity: 0.85; }
.flowviz .flow-line.alt { stroke: var(--lk-sky); animation-duration: 3.4s; }
.flowviz .flow-line.soft { opacity: 0.35; animation-duration: 4.2s; }
.flowviz .flow-line.join { stroke: var(--lk-sky); }
.flowviz .node-card { fill: var(--lk-white); stroke: #C9DCE4; stroke-width: 1.2; }
.flowviz .node { animation: node-in 700ms var(--ease-out) both; transform-box: fill-box; }
.flowviz .n0 { animation-delay: 200ms; } .flowviz .n1 { animation-delay: 380ms; } .flowviz .n2 { animation-delay: 560ms; }
.flowviz .n3 { animation-delay: 740ms; } .flowviz .n4 { animation-delay: 920ms; }
.flowviz .node-dot { fill: var(--lk-cyan-soft); }
.flowviz .n4 .node-dot { fill: var(--lk-violet-soft); }
.flowviz .node-label { font: 600 12px var(--font-sans); fill: var(--lk-ink); }
.flowviz .glyph-check { fill: none; stroke: var(--lk-cyan-ink); stroke-width: 2.4; stroke-linecap: round;
  stroke-linejoin: round; }
.flowviz .glyph-cell { fill: #9CCBDB; }
.flowviz .glyph-cell.head { fill: var(--lk-cyan-ink); }
.flowviz .glyph-cell.flag { fill: var(--lk-violet); }
.flowviz .glyph-bar { fill: var(--lk-cyan-deep); }
.flowviz .glyph-line { fill: none; stroke: var(--lk-violet); stroke-width: 1.8; stroke-linecap: round; }
.flowviz.compact { display: none; }

/* atmosphere and the sign-in scene: faint cells and paths, cards with structured rows, checks and small charts */
.bg-cell { fill: #E3F1F6; }
.bg-cell.v { fill: var(--lk-violet-soft); }
.bg-path { fill: none; stroke: #CFE8F1; stroke-width: 1.4; stroke-dasharray: 2 10; animation: flow 9s linear infinite; }
.scene .scene-bg { opacity: 0.9; }
.scene .scene-card { fill: var(--lk-white); stroke: #C9DCE4; stroke-width: 1.2; }
.scene .scene-card-g { animation: node-in 800ms var(--ease-out) 300ms both; }
.scene .card-title { font: 600 13px var(--font-sans); fill: var(--lk-ink); }
.scene .cell { fill: #E2ECF1; }
.scene .cell.head { fill: var(--lk-cyan-ink); }
.scene .cell.flag { fill: var(--lk-violet-soft); stroke: #C4B5FD; }
.scene .tick circle { fill: var(--lk-cyan-soft); }
.scene .tick path { fill: none; stroke: var(--lk-cyan-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scene .tick.attn circle { fill: var(--lk-violet-soft); }
.scene .tick.attn path { stroke: var(--lk-violet); }
.scene .row { animation: settle 700ms var(--ease-out) both; }
.scene .r1 { animation-delay: 120ms; } .scene .r2 { animation-delay: 240ms; } .scene .r3 { animation-delay: 360ms; }
.scene .r4 { animation-delay: 480ms; } .scene .r5 { animation-delay: 600ms; }
.scene .bar { fill: var(--lk-cyan-deep); transform-box: fill-box; transform-origin: bottom;
  animation: grow-soft 900ms var(--ease-out) 500ms both; }
.scene .bar.hi { fill: var(--lk-violet); }
.scene .axis { stroke: #D5E3EA; stroke-width: 1; }
.scene .kpi { fill: var(--lk-canvas); stroke: var(--border); }
.scene .kpi-bar { fill: var(--lk-cyan-deep); }
.scene .kpi-bar.v { fill: var(--lk-violet); }
.scene .kpi-line { fill: #C9D3DD; }
.scene .spark { fill: none; stroke: var(--lk-cyan-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scene .spark-area { fill: var(--lk-cyan-deep); opacity: 0.1; }
@keyframes settle { from { transform: translateX(-10px); } to { transform: none; } }
@keyframes grow-soft { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }

/* the same steps as a wrapping list where the drawing would be too small */
.flow-steps { list-style: none; margin: 0; padding: 0; display: none; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.flow-steps li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm);
  font-weight: var(--weight-medium); }
.flow-steps li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lk-cyan); }
.flow-steps li:last-child::before { background: var(--lk-violet); }
.flow-steps li + li { padding-left: 0; }
.flow-steps li:not(:last-child)::after { content: "\2192"; color: var(--lk-sky); margin-left: var(--space-1); }
.flow-figure { margin: var(--space-6) 0 var(--space-2); }
.flow-figure .flowviz.compact { display: none; }

/* atmosphere and the sign-in scene: faint cells and paths, cards with structured rows, checks and small charts */
.bg-cell { fill: #E3F1F6; }
.bg-cell.v { fill: var(--lk-violet-soft); }
.bg-path { fill: none; stroke: #CFE8F1; stroke-width: 1.4; stroke-dasharray: 2 10; animation: flow 9s linear infinite; }
.scene .scene-bg { opacity: 0.9; }
.scene .scene-card { fill: var(--lk-white); stroke: #C9DCE4; stroke-width: 1.2; }
.scene .scene-card-g { animation: node-in 800ms var(--ease-out) 300ms both; }
.scene .card-title { font: 600 13px var(--font-sans); fill: var(--lk-ink); }
.scene .cell { fill: #E2ECF1; }
.scene .cell.head { fill: var(--lk-cyan-ink); }
.scene .cell.flag { fill: var(--lk-violet-soft); stroke: #C4B5FD; }
.scene .tick circle { fill: var(--lk-cyan-soft); }
.scene .tick path { fill: none; stroke: var(--lk-cyan-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scene .tick.attn circle { fill: var(--lk-violet-soft); }
.scene .tick.attn path { stroke: var(--lk-violet); }
.scene .row { animation: settle 700ms var(--ease-out) both; }
.scene .r1 { animation-delay: 120ms; } .scene .r2 { animation-delay: 240ms; } .scene .r3 { animation-delay: 360ms; }
.scene .r4 { animation-delay: 480ms; } .scene .r5 { animation-delay: 600ms; }
.scene .bar { fill: var(--lk-cyan-deep); transform-box: fill-box; transform-origin: bottom;
  animation: grow-soft 900ms var(--ease-out) 500ms both; }
.scene .bar.hi { fill: var(--lk-violet); }
.scene .axis { stroke: #D5E3EA; stroke-width: 1; }
.scene .kpi { fill: var(--lk-canvas); stroke: var(--border); }
.scene .kpi-bar { fill: var(--lk-cyan-deep); }
.scene .kpi-bar.v { fill: var(--lk-violet); }
.scene .kpi-line { fill: #C9D3DD; }
.scene .spark { fill: none; stroke: var(--lk-cyan-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scene .spark-area { fill: var(--lk-cyan-deep); opacity: 0.1; }
@keyframes settle { from { transform: translateX(-10px); } to { transform: none; } }
@keyframes grow-soft { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }

/* the same steps as a wrapping list where the drawing would be too small */
.flow-steps { list-style: none; margin: 0; padding: 0; display: none; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.flow-steps li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm);
  font-weight: var(--weight-medium); }
.flow-steps li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lk-cyan); }
.flow-steps li:last-child::before { background: var(--lk-violet); }
.flow-steps li + li { padding-left: 0; }
.flow-steps li:not(:last-child)::after { content: "\2192"; color: var(--lk-sky); margin-left: var(--space-1); }
@keyframes flow { to { stroke-dashoffset: -56; } }
@keyframes node-in { from { transform: translateY(10px); } to { transform: none; } }  /* movement only: always visible */
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes drift-x { from { transform: translateX(0); } to { transform: translateX(-3%); } }

/* --- editorial sections ------------------------------------------------------------------------------------------ */
.band { padding: var(--space-9) 0; }
.band-cool { background: var(--lk-canvas); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.band h2 { font-size: var(--text-3xl); line-height: 1.08; letter-spacing: -0.03em; max-width: 20ch;
  margin-bottom: var(--space-4); }
.band .intro { font-size: var(--text-lg); color: var(--text-secondary); max-width: 58ch; }
.band-head { max-width: 760px; }
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-8);
  align-items: start; }
.path { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; }
.path::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 2px;
  background: linear-gradient(90deg, var(--lk-sky), var(--lk-cyan), var(--lk-violet-bright)); }
.path li { position: relative; padding: var(--space-6) var(--space-3) 0 0; }
.path li::before { content: ""; position: absolute; top: 8px; left: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--lk-white); border: 3px solid var(--lk-cyan-deep); }
.path li:last-child::before { border-color: var(--lk-violet); }
.path b { display: block; font-size: var(--text-md); margin-bottom: var(--space-1); }
.path span { font-size: var(--text-sm); color: var(--text-secondary); }
.path .opt b::after { content: " (optional)"; font-weight: var(--weight-regular); color: var(--text-muted);
  font-size: var(--text-xs); }

.facts { margin: var(--space-5) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--border); }
.facts div { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--border); }
.facts dt { font-size: var(--text-sm); color: var(--text-muted); }
.facts dd { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-strong); letter-spacing: -0.01em; }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { padding: var(--space-3) 0 var(--space-3) var(--space-6); position: relative;
  border-bottom: 1px solid var(--grid-line); }
.plain li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 14px; height: 2px;
  background: var(--lk-cyan-deep); }
.plain li.no::before { background: var(--text-muted); }

/* a real product component, shown with synthetic, clearly illustrative values */
.ui-sample { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--lk-white);
  box-shadow: var(--shadow-lg); overflow: hidden; }
.ui-sample .bar-top { display: flex; gap: 6px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border);
  background: var(--lk-canvas); align-items: center; font-size: var(--text-xs); color: var(--text-muted); }
.ui-sample .bar-top i { width: 9px; height: 9px; border-radius: 50%; background: #D5E3EA; }
.sample-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--grid-line); }
.sample-stats div { padding: var(--space-3) var(--space-4); border-right: 1px solid var(--grid-line); }
.sample-stats div:last-child { border-right: 0; }
.sample-stats b { display: block; font-size: var(--text-xl); letter-spacing: -0.02em; }
.sample-stats span { font-size: var(--text-xs); color: var(--text-secondary); }
.sample-stats .attn { box-shadow: inset 0 3px 0 var(--lk-violet); }
.ui-sample table td, .ui-sample table th { padding: var(--space-2) var(--space-4); }
.ui-sample del { color: var(--text-muted); }
.ui-sample ins { text-decoration: none; color: var(--lk-success); font-weight: var(--weight-medium); }
.ui-sample .caption { padding: var(--space-3) var(--space-4); font-size: var(--text-xs); color: var(--text-muted);
  border-top: 1px solid var(--grid-line); }

/* --- request form ------------------------------------------------------------------------------------------------ */
.form-card { background: var(--lk-white); color: var(--text); border-radius: var(--radius-lg); padding: var(--space-6);
  border: 1px solid var(--border); box-shadow: 0 30px 70px -36px rgba(8, 119, 158, 0.35), var(--shadow-sm); }
.form-card h2 { font-size: var(--text-xl); margin-bottom: var(--space-1); }
.form-card .form-intro { color: var(--text-secondary); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.form-card .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
.form-card .acks .check { font-size: var(--text-sm); }
.form-card .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-card .btn-primary { width: 100%; }
.form-done { text-align: left; }
.form-done .tick { width: 54px; height: 54px; border-radius: 50%; background: var(--lk-success-soft);
  display: grid; place-items: center; margin-bottom: var(--space-4); }
.form-done .tick svg path { fill: none; stroke: var(--lk-success); stroke-width: 3; stroke-linecap: round;
  stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw 600ms var(--ease-out) 100ms forwards; }

.public-foot { padding: var(--space-6) 0; border-top: 1px solid var(--border); font-size: var(--text-sm);
  color: var(--text-muted); }
.public-foot .wrap { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: center; }

/* reveal on scroll: visible by default; the script only hides what is still below the fold */
.reveal-pending { opacity: 0; transform: translateY(18px); }
.reveal-in { opacity: 1; transform: none; transition: opacity var(--duration-slow) var(--ease-out),
  transform var(--duration-slow) var(--ease-out); }

/* --- sign-in and invitation: a quiet panel beside the flowing visual ------------------------------------------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr); }
.auth-art { position: relative; padding: var(--space-6) var(--space-7); display: grid;
  grid-template-rows: auto auto 1fr; gap: var(--space-5); overflow: hidden; min-height: 100vh;
  background:
    radial-gradient(40rem 28rem at 8% -8%, rgba(36, 183, 229, 0.20), transparent 62%),
    radial-gradient(30rem 22rem at 96% 92%, rgba(124, 58, 237, 0.08), transparent 60%),
    radial-gradient(34rem 24rem at 70% 55%, rgba(95, 169, 194, 0.12), transparent 65%),
    linear-gradient(165deg, var(--lk-white) 0%, var(--lk-canvas) 45%, var(--lk-surface-cool) 100%);
  border-right: 1px solid var(--border); }
.auth-copy h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: -0.03em; max-width: 16ch;
  margin: var(--space-2) 0 var(--space-3); }
.auth-copy p:not(.eyebrow) { color: var(--text-secondary); max-width: 44ch; }
.auth-visual { align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 0; }
.auth-visual .scene { width: 100%; max-width: 720px; max-height: calc(100vh - 380px); min-height: 300px; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--gutter); }
.auth-form .box { width: 100%; max-width: 400px; }
.auth-form h2 { font-size: var(--text-2xl); letter-spacing: -0.02em; margin-bottom: var(--space-2); }
.auth-form .sub { color: var(--text-secondary); margin-bottom: var(--space-5); }
.auth-form button[type="submit"] { width: 100%; min-height: 48px; font-size: var(--text-md); margin-top: var(--space-1); }
.auth-form .alt { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--grid-line);
  font-size: var(--text-sm); color: var(--text-secondary); }
.password-field { position: relative; }
.password-field input { padding-right: 76px; }
.password-field .reveal { position: absolute; right: 4px; top: 4px; bottom: 4px; min-height: 0; padding: 0 var(--space-3);
  border: 0; background: transparent; color: var(--link); font-size: var(--text-xs); }
.password-field .reveal:hover { background: var(--surface-cool); }
.notice-throttle { background: var(--lk-warning-soft); color: var(--lk-warning); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); }
.shake { animation: shake 360ms var(--ease-out); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

@media (max-width: 1100px) {
  .ea-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: var(--space-6); }
}
@media (max-width: 960px) {
  .ea-grid, .split { grid-template-columns: 1fr; }
  .ea-copy { padding-top: var(--space-4); }
  .ea-backdrop { display: none; }
  .path { grid-template-columns: 1fr; gap: 0; }
  .path::before { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .path li { padding: 0 0 var(--space-4) var(--space-6); }
  .path li::before { top: 4px; }
  .auth { grid-template-columns: 1fr; }
  .auth-art { order: 2; border-right: 0; border-top: 1px solid var(--border); padding: var(--space-6) var(--gutter); }
  .auth-art { min-height: 0; }
  .auth-visual .scene { max-height: none; min-height: 0; max-width: 640px; }
  .auth-form { order: 1; padding-top: var(--space-6); }
  .band { padding: var(--space-8) 0; }
}
@media (max-width: 1100px) {
  .auth-art { padding: var(--space-6) var(--space-5); }
}
@media (max-width: 720px) {
  .flow-figure .flowviz.wide { display: none; }
  .flow-figure .flowviz.compact { display: block; max-width: 320px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .public-nav .links a:not(.btn) { display: none; }
  .public-nav .product-name { display: none; }
  .form-card { padding: var(--space-5) var(--space-4); }
  .form-card .two, .facts { grid-template-columns: 1fr; }
  .sample-stats { grid-template-columns: repeat(2, 1fr); }
  .auth-visual .scene { display: none; }
  .auth-visual .flow-steps { display: flex; }
  .auth-art { min-height: 0; }
  .hero-flow .strip { display: none; }
  .hero-flow .flow-steps { display: flex; }
  .hero-flow { margin-left: 0; }
  .seal-mark, .ea-seal .seal-mark { width: 116px; height: 116px; }
  .seal-crest, .ea-seal .seal-crest { width: 80px; height: 80px; }
  .ea-seal::before { top: 58px; }
  .auth-form .lk-seal { margin-bottom: var(--space-5); }
}
@media (prefers-reduced-motion: reduce) {
  .flowviz .node, .flowviz .glyph-check, .flowviz .glyph-bar { opacity: 1; transform: none; stroke-dashoffset: 0;
    animation: none !important; }
  .flowviz .file, .flowviz .flow-line, .ea-backdrop, .ea-backdrop .atmos, .bg-path, .scene .row, .scene .bar,
  .scene .scene-card-g { animation: none !important; transform: none; }
  .reveal-pending { opacity: 1; transform: none; }
  .seal-crest { animation: none !important; transform: none; }
}

/* the sign-in and invitation form keep their own padding (the generic public <main> reset does not apply) */
body.public main.auth-form { padding: var(--space-6) var(--gutter); }
@media (max-width: 960px) {
  .public-nav .links a:not(.btn):not([href="/login"]) { display: none; }
}