/* ════════════════ FORMS — LedgerField: unboxed input, one hairline rule ════════════════ */
.form-sheet { max-width: 760px; margin: 56px auto 0; padding: clamp(28px, 4vw, 52px); }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
.field { position: relative; display: block; padding-top: 18px; }
.field + .field { margin-top: 0; }
.field .lab { display: block; font: 700 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); transition: color .3s; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 48px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0;
  background: transparent; color: #fff; font: 400 16px/1.4 var(--sans); outline: none; transition: border-color .3s;
}
.field textarea { resize: vertical; min-height: 96px; }
.field select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--mint) 50%), linear-gradient(135deg, var(--mint) 50%, transparent 50%); background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option { background: var(--card); color: #fff; }
.field ::placeholder { color: var(--ink-4); }
.field .rule { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--mint-hi), transparent); transform: scaleX(0); transition: transform .6s var(--ease); }
.field:focus-within .rule { transform: scaleX(1); }
.field:focus-within .lab { color: var(--mint); }
.field textarea + .rule { bottom: 6px; }
.form-sheet .btn { margin-top: 32px; }
.form-success { display: none; text-align: center; padding: 28px 12px; font-family: var(--serif); font-size: 28px; line-height: 1.25; color: var(--mint); }
.form-success.show { display: block; animation: lineIn 1s var(--ease) forwards; }
.form-error { display: none; margin-top: 14px; font-size: 14px; color: var(--rose); text-align: center; }
.form-error.show { display: block; }
.form-error a { color: var(--rose); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup .edge { --o: .5; }

/* Sign Up | Get In Touch: a two-segment switch in the eyebrow slot (the app's lens pills), one card per tab */
.signup { --seg-h: 41px; }
.seg { display: inline-flex; vertical-align: top; gap: 4px; padding: 4px; border-radius: 99px; background: var(--card); box-shadow: inset 0 0 0 1px var(--hair); }
.seg-tab {
  border: 0; border-radius: 99px; background: transparent; cursor: pointer; padding: 11px 18px;
  font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); transition: color .3s, background .3s;
}
.seg-tab:hover { color: var(--ink-2); }
.seg-tab[aria-selected="true"] { background: var(--mint); color: var(--canvas); }
/* #support is the Get In Touch panel; with JS, land on the switch above it, where #signup lands */
#support { scroll-margin-top: 88px; }
.js #support { scroll-margin-top: calc(88px + var(--seg-h)); }
/* Both panels share one grid cell, so switching tabs never moves the page */
.js .seg-panels { display: grid; }
.js .seg-panel { grid-area: 1 / 1; transition: opacity .5s var(--ease), visibility 0s; }
.js .seg-panel:not(.on) { opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; }
html:not(.js) .seg { display: none; }
html:not(.js) .seg-panel + .seg-panel { margin-top: 120px; }
.contact-line { margin-top: 20px; display: grid; justify-items: center; gap: 10px; }
.contact-line a { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-size: 16px; }
.contact-line a:hover { color: var(--mint); }
.contact-line .glyph { width: 36px; height: 36px; border-radius: 10px; }
.contact-line .glyph svg { width: 16px; height: 16px; }

@media (max-width: 560px) {
  .fgrid { grid-template-columns: 1fr; }
}
.tried .field input:invalid, .tried .field textarea:invalid, .tried .field select:invalid { border-bottom-color: var(--rose); }