/* DV86 HOURGLASS OTP · Sable sign-in, step 2 · stage 1 of 3: the page in HTML and CSS, the hourglass in frosted CSS.
   One light theme of its own (never the OS).
   Desktop is laid out on the 1600×1000 concept and scaled by --u; portrait screens stack (hourglass first). */
:root {
  --u: min(calc(100vw / 1600), calc(100svh / 1000));
  --paper: #eee4d6; --ink: #2b2219; --body: #6b5d4f; --muted: #6b5d4f; --kicker: #835b2b; --accent: #9b6a2f;
  --ring: #c39258; --slot: rgba(255, 252, 246, .78); --err: #a2402c; --err-ring: #c4553f; --ok: #3f6d3b; --ok-ring: #5f8f5a;
  --fb-sand: #c99a5c;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: #ece3d6; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; overflow-x: hidden; color: var(--ink); font-family: 'Inter', system-ui, sans-serif;
  background: radial-gradient(120% 90% at 30% 45%, #f0e7da 0%, #ece3d6 55%, #e5dbcc 100%);
  -webkit-font-smoothing: antialiased;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button { font: inherit; color: inherit; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px;
  border-radius: 22px; background: var(--ink); color: #fff8ee; font: 600 14px/1 'Inter'; text-decoration: none; }
.skip:focus { top: 12px; outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---- nav */
.nav { position: absolute; top: 0; left: 0; right: 0; height: calc(84 * var(--u)); min-height: 60px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 calc(64 * var(--u)); z-index: 6; pointer-events: none; }
.nav a { pointer-events: auto; }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 500 max(20px, calc(22 * var(--u)))/1 'Fraunces', serif;
  letter-spacing: -.01em; color: var(--ink); text-decoration: none; border-radius: 10px; }
.logo i { width: 18px; height: 22px; display: block; background: linear-gradient(180deg, #c99a5c, #a8783c);
  clip-path: polygon(0 0, 100% 0, 58% 50%, 100% 100%, 0 100%, 42% 50%); }
.help { font: 500 max(13px, calc(13 * var(--u)))/1 'Inter'; color: var(--muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 4px; border-radius: 8px; transition: color .2s; }
.help:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.logo:focus-visible, .help:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

/* ---- desktop layout */
.layout { position: relative; min-height: 100svh; display: flex; align-items: center; }
.form { position: relative; z-index: 4; margin-left: calc(144 * var(--u)); width: max(400px, calc(520 * var(--u))); padding: calc(96 * var(--u)) 0 calc(150 * var(--u)); }
.stage { position: absolute; left: 46vw; right: 0; top: 0; height: 100svh; min-height: 560px; z-index: 2; }
.panel { position: absolute; left: 6vw; right: 4.6vw; top: max(10svh, 72px); bottom: 6svh; border-radius: calc(36 * var(--u)); }

.kicker { margin: 0; font: 600 max(11px, calc(11 * var(--u)))/1 'Inter'; letter-spacing: .28em; text-transform: uppercase; color: var(--kicker); }
h1 { font: 400 max(40px, calc(58 * var(--u)))/1.02 'Fraunces', serif; letter-spacing: -.02em; margin: calc(16 * var(--u)) 0 calc(14 * var(--u)); font-optical-sizing: auto; }
h1 em { font-style: italic; color: var(--accent); }
.sub { font: 400 max(15px, calc(16 * var(--u)))/1.55 'Inter'; color: var(--body); margin: 0 0 calc(34 * var(--u)); max-width: 31em; }
.sub b { color: var(--ink); font-weight: 600; white-space: nowrap; }
form { margin: 0; }
.otp { border: 0; padding: 0; margin: 0 0 calc(26 * var(--u)); min-width: 0; display: flex; gap: calc(12 * var(--u)); }
.dg { width: max(48px, calc(68 * var(--u))); height: max(58px, calc(82 * var(--u))); flex: 0 0 auto; border: 0; border-radius: max(12px, calc(16 * var(--u))); padding: 0; text-align: center;
  font: 500 max(26px, calc(34 * var(--u)))/1 'Fraunces', serif; color: var(--ink); background: var(--slot); caret-color: #b07a3a;
  box-shadow: 0 0 0 1px rgba(120, 95, 60, .18) inset, 0 1px 0 rgba(255, 255, 255, .9) inset, 0 6px 18px rgba(90, 60, 30, .06);
  outline: 0; transition: box-shadow .2s, transform .18s cubic-bezier(.2, .8, .2, 1), background .2s, color .2s; -webkit-appearance: none; appearance: none; }
.dg:nth-of-type(3) { margin-right: calc(14 * var(--u)); }
.dg:hover:not(:disabled):not(:focus) { box-shadow: 0 0 0 1px rgba(150, 110, 60, .34) inset, 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 20px rgba(90, 60, 30, .09); }
.dg:focus { box-shadow: 0 0 0 2px var(--ring) inset, 0 0 0 6px rgba(195, 146, 88, .2), 0 10px 26px rgba(150, 100, 40, .14); background: #fffdf8; transform: translateY(-2px); }
.dg.filled { background: #fffaf1; }
@keyframes pop { 0% { transform: translateY(-2px) scale(.94); } 100% { transform: translateY(-2px) scale(1); } }
.dg:disabled { background: rgba(240, 233, 223, .7); color: #9c8f80; box-shadow: 0 0 0 1px rgba(120, 95, 60, .12) inset; cursor: not-allowed; }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

.row { display: flex; align-items: center; gap: calc(18 * var(--u)); flex-wrap: wrap; }
.verify { position: relative; height: max(50px, calc(56 * var(--u))); min-width: 120px; padding: 0 calc(34 * var(--u)); border-radius: 999px; border: 0; cursor: pointer;
  font: 600 max(15px, calc(15 * var(--u)))/1 'Inter'; color: #fff8ee; background: var(--ink); box-shadow: 0 10px 24px rgba(43, 34, 25, .22);
  transition: transform .15s, background .2s, box-shadow .2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.verify:hover:not(:disabled) { background: #3e3125; box-shadow: 0 14px 30px rgba(43, 34, 25, .28); }
.verify:active:not(:disabled) { transform: scale(.97); }
.verify:disabled { background: #b9ab99; box-shadow: none; cursor: default; }
.verify:focus-visible, .resend:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.verify .spin, .verify .tick { display: none; }
.verify .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 248, 238, .35); border-top-color: #fff8ee; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.resend { min-height: 44px; font: 500 max(14px, calc(14 * var(--u)))/1 'Inter'; color: var(--muted); background: none; border: 0; padding: 8px 2px; cursor: default; border-radius: 8px; }
.resend b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.resend[aria-disabled="false"] { color: var(--accent); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.resend[aria-disabled="false"]:hover { color: #7c5220; }
.msg { margin: calc(20 * var(--u)) 0 0; font: 400 max(13px, calc(13.5 * var(--u)))/1.45 'Inter'; color: var(--muted); min-height: 1.45em; }
.msg b { font-weight: 600; color: var(--ink); letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* ---- the stage overlays */
@keyframes breathe { 0%, 100% { opacity: .25; transform: scale(.96); } 50% { opacity: .9; transform: scale(1.04); } }
@keyframes turn { 0%, 55% { transform: rotate(0); } 80%, 100% { transform: rotate(360deg); } }

/* ---- caption + brandmark (desktop) */
.cap { position: absolute; left: calc(48 * var(--u)); bottom: calc(46 * var(--u)); z-index: 3; margin: 0; pointer-events: none; }
.cap p { margin: 0; }
.cap-k { font: 600 max(11px, calc(11 * var(--u)))/1 'Inter'; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.cap-t { margin-top: calc(14 * var(--u)) !important; font: 500 max(14px, calc(17 * var(--u)))/1.2 'Inter'; color: var(--ink); }
.cap-s { margin-top: calc(9 * var(--u)) !important; font: 400 max(12px, calc(13 * var(--u)))/1.35 'Inter'; color: var(--muted); }
.brandmark { position: absolute; right: calc(50 * var(--u)); bottom: calc(40 * var(--u)); margin: 0; z-index: 3; font: 600 max(10px, calc(11 * var(--u)))/1 'Inter';
  letter-spacing: .3em; text-transform: uppercase; color: #8a7a68; pointer-events: none; }

/* ---- CSS fallback (no WebGL): a frosted glass hourglass, sand levels follow the timer */
.fb { display: none; }
.no-fx .panel { overflow: hidden; background: radial-gradient(70% 55% at 18% 12%, #fff1d0 0%, rgba(255, 241, 208, 0) 70%),
  linear-gradient(162deg, #f8e2bd 0%, #e2c69d 55%, #d2b088 82%, #b9926a 86%, #b48b62 100%); box-shadow: 0 30px 60px rgba(90, 60, 30, .12); }
.no-fx .fb { display: block; position: absolute; left: var(--fx, 50%); top: var(--fy, 50%); width: calc(var(--fs, 300px) * 1.12); height: calc(var(--fs, 300px) * 1.96);
  transform: translate(-50%, -50%) rotate(var(--fr, 0deg)); transition: transform .9s cubic-bezier(.3, 1.3, .4, 1); }
.fb-cap { position: absolute; left: 0; right: 0; height: 6.1%; border-radius: 10px; background: linear-gradient(180deg, #8a5a36, #5a3519 60%, #3e230f);
  box-shadow: 0 4px 10px rgba(50, 25, 10, .3); }
.fb-cap.t { top: 0; } .fb-cap.b { bottom: 0; }
.fb-post { position: absolute; top: 5%; bottom: 5%; width: 4.6%; border-radius: 6px; background: linear-gradient(90deg, #7a5a2a, #f0d394 35%, #b38a48 60%, #6d4f22); }
.fb-post.l { left: 7.7%; } .fb-post.r { right: 7.7%; }
.fb-glass { position: absolute; left: 17.8%; right: 17.8%; top: 5.8%; bottom: 5.8%;
  clip-path: polygon(20% 0, 80% 0, 98% 22%, 100% 32%, 90% 40%, 54% 49%, 54% 51%, 90% 60%, 100% 68%, 98% 78%, 80% 100%, 20% 100%, 2% 78%, 0 68%, 10% 60%, 46% 51%, 46% 49%, 10% 40%, 0 32%, 2% 22%);
  background: linear-gradient(90deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .55) 22%, rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, .2) 80%, rgba(255, 255, 255, .45));
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.fb-sand { position: absolute; left: 0; right: 0; background: linear-gradient(180deg, #d9ad70, var(--fb-sand) 50%, #b9874b); transition: height 1s linear; }
.fb-sand.top { bottom: 51%; height: calc((1 - var(--p, .6)) * 34%); clip-path: polygon(0 0, 100% 0, 100% 100%, 54% 100%, 50% 80%, 46% 100%, 0 100%); }
.fb-sand.bot { bottom: 0; height: calc(var(--p, .6) * 36%); clip-path: polygon(0 30%, 50% 0, 100% 30%, 100% 100%, 0 100%); }
.fb-stream { position: absolute; left: 49.4%; width: 1.2%; top: 49%; bottom: calc(var(--p, .6) * 36% - 2%); background: #c99a5c; }
.no-fx .stage:not(.running) .fb-stream { display: none; }

/* ---- portrait: stack the hourglass above the form */
@media (max-width: 760px), (max-aspect-ratio: 1/1) and (max-width: 1100px) {
  .nav { position: absolute; height: 60px; min-height: 0; padding: 0 20px; }
  .help { display: none; }
  .logo { font-size: 22px; }
  .layout { display: flex; flex-direction: column; align-items: stretch; padding-top: 58px; }
  .stage { order: -1; }
  .stage { position: relative; left: auto; right: auto; top: auto; width: 100%; height: clamp(300px, 49svh, 600px); min-height: 0; }
  .panel { left: 14px; right: 14px; top: 2px; bottom: 8px; border-radius: 30px; }
  .form { margin: 0 auto; width: 100%; max-width: 560px; padding: 16px 20px 32px; }
  .kicker { font-size: 11px; }
  h1 { font-size: clamp(32px, 9vw, 40px); margin: 10px 0 8px; }
  .sub { font-size: 14.5px; margin-bottom: 18px; }
  .otp { gap: 8px; margin-bottom: 18px; }
  .dg { flex: 1 1 0; width: auto; min-width: 0; height: 58px; font-size: 28px; border-radius: 13px; }
  .dg:nth-of-type(3) { margin-right: 6px; }
  .row { gap: 14px; }
  .verify { height: 50px; padding: 0 28px; }
  .msg { margin-top: 14px; font-size: 13px; }
  .cap, .brandmark { display: none; }
}
@media (min-width: 600px) and (max-aspect-ratio: 1/1) and (max-width: 1100px) {
  .stage { height: clamp(380px, 57svh, 820px); }
  .panel { left: 28px; right: 28px; border-radius: 36px; }
  .form { padding-top: 26px; }
  h1 { font-size: 48px; }
  .sub { font-size: 16px; }
  .dg { height: 72px; font-size: 32px; max-width: 76px; }
}
@media (min-width: 900px) and (max-aspect-ratio: 1/1) and (max-width: 1100px) {
  .form { max-width: 680px; }
  .kicker { font-size: 13px; }
  h1 { font-size: 64px; }
  .sub { font-size: 19px; }
  .dg { height: 92px; max-width: 84px; font-size: 40px; border-radius: 18px; }
  .verify { height: 60px; font-size: 17px; padding: 0 38px; }
  .resend { font-size: 16px; } .msg { font-size: 15px; }
}
@media (max-width: 360px) {
  .form { padding-left: 12px; padding-right: 12px; }
  .otp { gap: 5px; }
  .dg:nth-of-type(3) { margin-right: 3px; }
  .dg { height: 52px; font-size: 25px; }
  .stage { height: clamp(270px, 46svh, 600px); }
}
/* short landscape phones: side by side, compact */
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .nav { height: 52px; min-height: 0; padding: 0 24px; }
  .help { display: none; }
  .layout { min-height: 100svh; align-items: center; }
  .form { margin-left: 5vw; width: min(420px, 47vw); padding: 56px 0 18px; }
  h1 { font-size: 30px; margin: 8px 0 6px; }
  .sub { font-size: 13px; margin-bottom: 12px; }
  .otp { gap: 7px; margin-bottom: 12px; }
  .dg { width: auto; flex: 1 1 0; min-width: 0; height: 50px; font-size: 24px; border-radius: 12px; }
  .dg:nth-of-type(3) { margin-right: 5px; }
  .verify { height: 46px; padding: 0 22px; }
  .msg { margin-top: 8px; font-size: 12.5px; }
  .stage { left: 52vw; min-height: 0; }
  .panel { left: 2vw; right: 3vw; top: 12px; bottom: 12px; border-radius: 26px; }
  .cap, .brandmark { display: none; }
  /* phones on their side up to 760 px also match the portrait block: undo its stacking, keep the two side by side */
  .layout { flex-direction: row; padding-top: 0; }
  .stage { order: 0; position: absolute; top: 0; right: 0; width: auto; height: 100svh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}