:root {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color: #28354a;
  color-scheme: light;
  font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html,body { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(ellipse 85% 56% at 48% -7%, rgba(255,255,255,.96), transparent 100%), #f5f2eb;
}
button, input { font: inherit; }
.auth-layout {
  width: min(100%, 1310px);
  margin-inline: auto;
  padding: 30px clamp(14px, 5vw, 76px) 32px;
}
.brand {display:flex;align-items:center;gap:14px;margin:0 4px 27px;}
.brand-icon {
  width: 47px; height: 47px; display:grid;place-items:center; flex:none;
  border-radius:15px;background:#283b51;color:white;transform:rotate(-4deg);
  box-shadow:0 5px 14px rgba(34,49,66,.2);
}
.brand-icon svg {width:25px;height:25px;}
h1 {font-size:clamp(23px,2.6vw,30px);line-height:1.1;font-weight:760;letter-spacing:-.9px;margin:0;}
.brand p {margin:6px 0 0;font-size:13px;color:#90938f;letter-spacing:.15px;}
.auth-board {position:relative;}
.auth-whiteboard {
  position:relative;
  min-height:clamp(540px,65dvh,710px);
  width:100%;padding:12px;
  border:1px solid #92999c;border-radius:10px;
  background:linear-gradient(91deg,rgba(255,255,255,.68),rgba(255,255,255,.08) 7%,transparent 21% 79%,rgba(255,255,255,.2) 96%),
      linear-gradient(to bottom,#e6e9e9 0%,#c0c6c8 18%,#9da5a9 47%,#dde1e2 80%,#afb7ba 100%);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset,0 2px 2px rgba(80,84,85,.23),0 19px 28px rgba(75,75,72,.13),0 31px 57px rgba(83,79,69,.08);
}
.auth-whiteboard::before {
  content:'';position:absolute;inset:3px;border:1px solid rgba(255,255,255,.65);border-radius:7px;pointer-events:none;
}
.auth-surface {
  position:relative;min-height:calc(clamp(540px,65dvh,710px) - 26px);
  padding:clamp(35px,4vw,63px) 20px 68px;
  border:1px solid #adb4b4;border-radius:2px;
  background:radial-gradient(ellipse 86% 100% at 52% 43%,#fffefb 0%,#fbfbf9 72%,#f2f4f2 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),inset 0 0 20px rgba(64,75,79,.10),inset 0 3px 8px rgba(50,58,60,.1);
}
.auth-surface::after {
  content:'';pointer-events:none;position:absolute;inset:0;
  background:linear-gradient(113deg,transparent 18%,rgba(255,255,255,.18) 42%,rgba(255,255,255,.33) 44%,transparent 66%);
  opacity:.35;
}
.quote-scene {
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  width:min(100%,1020px);margin:0 auto 15px;
  min-height:clamp(126px,15vw,205px);
}
.quote-marker {
  font-family:'Marker Felt', 'Chalkboard SE', 'Bradley Hand', 'Segoe Print',cursive;
  font-size:clamp(35px,5.1vw,77px);
  line-height:1.4;
  letter-spacing:-2px;
  color:#283b51;
  transform:rotate(-1.5deg);
  margin:0;
  text-align:center;
  text-shadow:0 1px 1px rgba(40,59,81,.12);
}
.quote-possible {position:relative;display:inline-block;white-space:nowrap;}
.quote-possible::after, .quote-possible::before {
  content:'';position:absolute;height:6px;
  background:#6d9ccd;opacity:.83;border-radius:50% 44% 62% 48%;pointer-events:none;
  left:19%;right:3%;bottom:2px;transform:rotate(-4deg);
}
.quote-possible::before {left:26%;right:7%;bottom:-9px;opacity:.63;transform:rotate(1deg);height:5px;}
.quote-rays {position:absolute;z-index:-1;fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;opacity:.85;pointer-events:none;width:75px;height:91px;}
.quote-rays-left {stroke:#6d9ccd;left:-1%;top:16%;transform:rotate(-5deg);}
.quote-rays-right {stroke:#287f69;right:-2%;top:10%;transform:rotate(4deg);}
.auth-panel {position:relative;z-index:1;width:min(100%,500px);margin:0 auto;}
.stage-heading h2 {font-size:23px;letter-spacing:-.5px;margin:0 0 6px;}
.stage-heading .intro {font-size:14px;line-height:1.5;color:#677c8a;margin:0 0 17px;}
/* Keep the landing page faithful to the approved mockup: quote, then fields. */
body[data-auth-stage="signin"] .stage-heading {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
label {display:block;margin:13px 3px 8px;font-family:'Marker Felt', 'Chalkboard SE', 'Bradley Hand', 'Segoe Print',cursive;font-size:17px;line-height:1.35;color:#283b51;}
.input-wrap {position:relative;}
.field-icon {position:absolute;left:19px;top:50%;width:22px;height:22px;transform:translateY(-50%);color:#40556c;pointer-events:none;}
input {
  display:block;width:100%;min-height:62px;padding:15px 17px 15px 59px;
  border:2px solid #cbd6e1;border-radius:13px;
  background:rgba(255,255,255,.75);color:#28354a;
  font-size:16px;line-height:1.35;outline:0;
  box-shadow:0 1px 1px #ffffffbf inset;
}
input::placeholder {color:#888e94;}
input:focus-visible {border-color:#6390bd;box-shadow:0 0 0 4px rgba(107,153,200,.23);}
.primary {
  display:block;width:100%;min-height:65px;margin-top:19px;
  padding:14px 16px;border:0;border-radius:13px;
  background:#283c53;color:#fff;font-size:20px;font-weight:620;letter-spacing:.05px;
  cursor:pointer;box-shadow:0 2px 4px rgba(31,48,67,.12);
}
.primary:hover {background:#344d69;}
.primary:focus-visible,.text-button:focus-visible {outline:3px solid #75a6d6;outline-offset:3px;}
button:disabled {opacity:.55;cursor:wait;}
.error {font-size:13px;line-height:1.45;color:#a82d37;margin:10px 0 0;text-align:center;min-height:0;}
.error:empty {display:none;}
.privacy-note {display:flex;align-items:center;justify-content:center;gap:9px;margin:22px 0 0;font-family:'Marker Felt', 'Chalkboard SE', 'Bradley Hand', 'Segoe Print',cursive;font-size:14px;color:#53667a;text-align:center;}
.privacy-note svg {width:24px;height:24px;color:#2b8a72;flex:none;}
.text-button {display:block;margin:16px auto 0;border:0;background:none;color:#345d78;font-size:13px;text-decoration:underline;cursor:pointer;padding:8px;}
.mfa-instructions {font-size:14px;color:#52697b;line-height:1.6;}
.small-caption {font-size:13px;color:#5b7080;margin:16px 0 9px;}
.qr {display:block;width:180px;height:180px;max-width:100%;margin:0 auto;padding:6px;background:#fff;border:1px solid #dce5e8;border-radius:8px;}
.secret {background:#edf2f4;border-radius:9px;padding:14px;text-align:center;font-size:12px;letter-spacing:1.5px;overflow-wrap:anywhere;font-family:ui-monospace,monospace;user-select:all;}
.auth-tray {
  position:relative;z-index:4;width:min(65%,690px);height:33px;margin:-5px auto 0;
  border:1px solid #a6adb1;border-top-color:#d5dddf;border-radius:2px 2px 10px 10px;
  background:linear-gradient(to bottom,#eff2f1 0%,#d3d7d7 17%,#a4abb0 33%,#b7bec0 56%,#d6dadb 74%,#a2a9ab 100%);
  box-shadow:0 4px 5px rgba(49,55,59,.20),0 14px 20px rgba(45,46,46,.10);
}
.auth-tray::before {content:'';position:absolute;left:-2%;right:-2%;top:-4px;height:8px;border:1px solid rgba(122,131,135,.5);border-radius:5px;background:linear-gradient(180deg,#e9edee,#bec4c8);box-shadow:0 1px 1px rgba(255,255,255,.9) inset;}
.auth-markers {position:absolute;z-index:5;left:8%;right:8%;top:-14px;height:26px;display:flex;gap:7%;justify-content:center;align-items:flex-start;pointer-events:none;}
.auth-marker {position:relative;display:block;flex:1 1 0;max-width:155px;height:21px;border:1px solid #969da0;border-left:0;border-radius:4px 9px 9px 4px;background:linear-gradient(to bottom,#d7dadd 0%,#fff 25%,#fefefe 57%,#c5cbce 100%);box-shadow:0 4px 4px rgba(34,39,39,.22),inset 0 1px 1px rgba(255,255,255,.9);}
.auth-marker:nth-child(1) {transform:translateY(0) rotate(-6deg);}
.auth-marker:nth-child(2) {transform:translateY(-3px) rotate(3deg);}
.auth-marker:nth-child(3) {transform:translateY(1px) rotate(-2deg);}
.auth-marker .cap {position:absolute;top:-2px;bottom:-2px;left:-2px;width:27%;border:1px solid rgba(18,21,25,.33);border-radius:5px 2px 2px 5px;background:linear-gradient(180deg,var(--cap-hi),var(--cap),var(--cap-lo));box-shadow:inset -3px 0 1px rgba(0,0,0,.18);}
.auth-marker .cap::after {content:'';position:absolute;top:3px;bottom:3px;right:3px;width:3px;background:rgba(255,255,255,.19);border-radius:2px;}
.auth-marker .barrel-label {position:absolute;right:7%;left:32%;top:50%;transform:translateY(-50%);color:#82878b;text-align:center;font-size:clamp(4px,.7vw,7px);font-weight:830;letter-spacing:1px;white-space:nowrap;}
.auth-marker .tip-end {position:absolute;right:4px;top:5px;width:3px;height:8px;background:#9a9fa0;border-radius:2px;opacity:.7;}
.auth-marker.black {--cap:#2a2d31;--cap-hi:#55585d;--cap-lo:#111316;}
.auth-marker.blue {--cap:#2563a6;--cap-hi:#508cca;--cap-lo:#163f77;}
.auth-marker.green {--cap:#237d69;--cap-hi:#429c83;--cap-lo:#135244;}
.foot {text-align:center;margin-top:24px;font-size:12px;color:#9a9d9c;}
@media (max-width:850px) {
  .quote-marker {font-size:clamp(31px,5.3vw,54px);letter-spacing:-1.5px;}
  .quote-rays {width:55px;height:70px;}
}
@media (max-width:600px) {
  .auth-layout {padding:20px 13px 26px;}
  .brand {margin:0 2px 21px;gap:11px;}
  .brand-icon {width:41px;height:41px;border-radius:12px;}
  .brand-icon svg {width:23px;height:23px;}
  h1 {font-size:23px;}
  .brand p {font-size:11px;margin-top:4px;}
  .auth-whiteboard {min-height:580px;padding:7px;border-radius:7px;}
  .auth-surface {min-height:562px;padding:31px 17px 58px;}
  .quote-scene {margin:0 auto 17px;min-height:152px;}
  .quote-marker {font-size:clamp(27px,7.15vw,38px);letter-spacing:-1px;line-height:1.55;}
  .quote-possible::before {height:3px;bottom:-5px;}
  .quote-possible::after {height:4px;bottom:1px;}
  .quote-rays {width:35px;height:46px;opacity:.65;}
  .quote-rays-left {left:-10px;top:1%;}
  .quote-rays-right {right:-11px;top:6%;}
  .auth-panel {width:100%;}
  label {font-size:16px;}
  input {min-height:57px;padding:13px 14px 13px 49px;}
  .field-icon {left:15px;width:20px;height:20px;}
  .primary {min-height:60px;font-size:18px;margin-top:20px;}
  .privacy-note {font-size:12px;gap:5px;margin-top:22px;}
  .privacy-note svg {width:21px;height:21px;}
  .auth-tray {width:84%;height:29px;}
  .auth-markers {left:7%;right:7%;top:-12px;gap:5%;}
  .auth-marker {height:18px;}
  .auth-marker .barrel-label {font-size:5px;letter-spacing:.4px;}
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {scroll-behavior:auto!important;transition:none!important;animation:none!important;}
}