.si { padding-top: clamp(28px, 4vw, 56px); }
.si-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .si-grid { grid-template-columns: minmax(0, 1fr); } }
.si-title { font-size: var(--kf-fs-display); }
.si-head .kf-lede { margin-top: 16px; }
/* The invitation gate's promise line under its headline (site panel G2). */
.si-tagline { margin: 14px 0 0; font: 500 var(--kf-fs-h3)/1.25 var(--kf-serif); color: var(--kf-sienna-text); text-wrap: balance; }
.si-steps { list-style: none; margin: clamp(20px, 3vw, 28px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.si-steps li { display: inline-flex; align-items: center; gap: 10px; font: 600 var(--kf-fs-label)/1.3 var(--kf-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kf-muted); }
.si-steps .n { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--kf-line); background: var(--kf-panel-solid); color: var(--kf-ink); }
.si-steps .is-current { color: var(--kf-ink); }
.si-steps .is-current .n { background: var(--kf-charcoal); color: #f6f1e6; border-color: var(--kf-charcoal); }
.si-steps .is-done .n { background: var(--kf-green); border-color: var(--kf-green); color: #fbf6ec; }
.si-card { position: relative; margin-top: 16px; padding: clamp(18px, 2.6vw, 30px); background: var(--kf-panel-solid); border-radius: 24px; box-shadow: var(--kf-shadow-card); max-width: 620px; }
.proto-note { margin: 0 0 18px; padding: 10px 14px; border-radius: 12px; border: 1px dashed rgba(107, 90, 69, 0.6); background: rgba(251, 246, 236, 0.9); font-size: var(--kf-fs-small); line-height: 1.45; color: var(--kf-muted); }
.si-form[hidden], .si-done[hidden], .form-error[hidden] { display: none; }
.si-h2 { font: 500 var(--kf-fs-h3)/1.12 var(--kf-serif); margin: 0 0 10px; }
.si-h2:focus { outline: none; }
.si-form > .muted { margin: 0 0 6px; color: var(--kf-muted); }
.si-form label { display: block; font: 600 var(--kf-fs-small)/1.3 var(--kf-sans); color: var(--kf-ink); margin: 16px 0 8px; }
.si-form input { display: block; width: 100%; min-height: 48px; padding: 11px 14px; border-radius: 12px; border: 1.5px solid rgba(60, 44, 24, 0.28); background: #fffdf8; color: var(--kf-ink); font: 400 var(--kf-fs-body)/1.4 var(--kf-sans); }
.si-form input:focus-visible { outline: 2px solid var(--kf-sienna); outline-offset: 2px; border-color: var(--kf-sienna); }
.si-form input[aria-invalid="true"] { border-color: var(--kf-red); background: #fffaf6; }
.si-form .code-input { font: 500 var(--kf-fs-h3)/1 var(--kf-mono); letter-spacing: 0.25em; text-align: center; min-height: 56px; }
.si-form .err { margin: 6px 0 0; font: 600 var(--kf-fs-small)/1.4 var(--kf-sans); color: var(--kf-red); }
.si-form .err:empty { display: none; }
.form-error { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #fbeee6; box-shadow: inset 0 0 0 1.5px rgba(168, 50, 31, 0.35); color: var(--kf-ink); font: 400 var(--kf-fs-small)/1.45 var(--kf-sans); }
/* The error takes the focus as the page appears (site panel item 9), so a
   screen reader reads it; it is no control, so it shows no focus ring. */
.form-error:focus { outline: none; }
.si-submit { width: 100%; margin-top: 16px; border: 0; cursor: pointer; gap: 8px; min-height: 48px; }
.si-submit[aria-disabled="true"] { opacity: 0.7; cursor: progress; }
.si-form .hint { margin: 12px 0 0; font-size: var(--kf-fs-small); color: var(--kf-muted); }
.si-form .si-lost { margin-top: 6px; }
.si-form .si-lost a { color: var(--kf-sienna-text); text-underline-offset: 2px; }
/* How sign-in is recorded: the site's disclosure (public.css details.more),
   smaller, inside the card. */
details.more.si-record { margin-top: 14px; }
details.more.si-record > summary { min-height: 44px; font-size: var(--kf-fs-small); }
.si-record .more-body { padding: 0 0 12px; }
.si-record .more-body p { margin: 0; font-size: var(--kf-fs-small); color: var(--kf-muted); }
.si-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 16px 0 0; margin: 18px 0 0; border-top: 1px solid var(--kf-line); color: var(--kf-muted); font: 400 var(--kf-fs-meta)/1.4 var(--kf-sans); }
.si-meta li { display: inline-flex; align-items: center; gap: 7px; }
.si-meta i { width: 6px; height: 6px; border-radius: 50%; background: var(--kf-sienna); }
.si-back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer; font: 600 var(--kf-fs-small) var(--kf-sans); color: var(--kf-sienna-text); text-decoration: underline; text-underline-offset: 4px; }
.si-done:focus { outline: none; }
.si-done .done-title { font: 500 var(--kf-fs-h3)/1.15 var(--kf-serif); margin: 0 0 8px; }
.si-done .muted { margin: 0; color: var(--kf-muted); }
.si-done .done-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 10px; }
.si-done .done-links .si-back { margin-top: 0; }
.si-side { display: grid; gap: 18px; }
@media (min-width: 901px) { .si-side { position: sticky; top: calc(var(--site-header-h) + 20px); } }
.si-still { position: relative; height: 300px; border-radius: 24px; overflow: hidden; border: 1px solid var(--kf-line);
  background: radial-gradient(130% 120% at 30% 0%, #fbf6ea 0%, #f1e7d4 55%, #e6d8bf 100%);
  box-shadow: inset 0 -24px 48px rgba(120, 84, 44, 0.10); }
@media (max-width: 900px) { .si-still { height: 200px; order: 2; } }
.si-still > * { position: absolute; }
.si-still img { max-width: none; }
.si-still .sglow { left: 50%; bottom: -60px; width: 460px; height: 300px; margin-left: -230px; border-radius: 50%; background: radial-gradient(closest-side, rgba(247, 178, 90, 0.55), rgba(247, 178, 90, 0.16) 55%, rgba(247, 178, 90, 0) 100%); }
.si-still .shadow { left: 18%; right: 18%; bottom: 22px; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(150, 96, 56, 0.4), rgba(150, 96, 56, 0) 100%); }
.si-still .s-phone { left: 42%; bottom: 30px; translate: -50% 0; }
.si-still .s-key { left: 70%; bottom: 36px; translate: -50% 0; }
.si-still .s-env { left: 70%; bottom: 150px; translate: -50% 0; }
@media (max-width: 900px) {
  .si-still .s-phone { height: 130px; width: auto; }
  .si-still .s-key { height: 60px; width: auto; bottom: 32px; }
  .si-still .s-env { height: 62px; width: auto; bottom: 110px; }
}
.si-none { padding: 16px 20px; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: 22px; }
.si-none p { margin: 0; }
.si-none .si-next { margin-top: 8px; font-size: var(--kf-fs-small); color: var(--kf-muted); }
/* The invitation gate's films (lib/preview-landing.ts): the shared grid under the section's lede. */
.gate-films .shorts { margin-top: clamp(20px, 3vw, 32px); }
.si-still:not(.is-code) .s-env { visibility: hidden; }