/* Hollow Bend — the application page (start.html). Loaded after styles.css; every class here starts with az.
 *
 * One stage. The backdrop is a bright daytime sky, shown sharp. The form sits on a light card, "Your file" on deep
 * green glass that the sky shows through, and under both one row of what happens next on light frosted glass.
 * The page is sized so each step fits a laptop screen without scrolling.
 *
 * The glass is alive in two ways (start.js drives both, and both stand down for reduced motion):
 *   --azx / --azy   where the pointer is, per glass object: the light and the bright rim follow it
 *   .az-sweep       one sheen across "Your file" when the step or the estimate changes
 */
@property --azx{syntax:'<length>';inherits:false;initial-value:290px}
@property --azy{syntax:'<length>';inherits:false;initial-value:26px}

.az{padding:10px}
.az-stage{position:relative;isolation:isolate;overflow:hidden;overflow:clip;display:flex;min-height:calc(100vh - 20px);border-radius:22px;background:#9DC5E9;color:#fff}

/* ---- backdrop: one sky. Two photographs of the same view (day, golden hour) and three washes; data-sky on .az-bg
        says how much of each, so picking a trade changes the light and never the scene ---- */
.az-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.az-sky{position:absolute;inset:0}
.az-sky img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.az-sky-g,.az-bg>i{opacity:0;transition:opacity 1.6s ease}
.az-bg>i{position:absolute;inset:0}
.az-sky-b{background:linear-gradient(180deg,rgba(22,96,198,.36) 0%,rgba(22,96,198,.14) 44%,transparent 70%)}
.az-sky-c{background:linear-gradient(180deg,rgba(120,176,196,.2) 0%,rgba(186,216,224,.42) 62%,rgba(186,216,224,.16) 100%)}
.az-sky-h{background:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.12) 58%,transparent 100%)}
.az-bg[data-sky=early] .az-sky-g{opacity:.42}
.az-bg[data-sky=gold] .az-sky-g{opacity:1}
.az-bg[data-sky=late] .az-sky-g{opacity:.74}
.az-bg[data-sky=late] .az-sky-b{opacity:.75}
.az-bg[data-sky=soft] .az-sky-g{opacity:.16}
.az-bg[data-sky=soft] .az-sky-h{opacity:1}
.az-bg[data-sky=open] .az-sky-b{opacity:1}
.az-bg[data-sky=crisp] .az-sky-c{opacity:1}
@media (min-width:981px) and (prefers-reduced-motion:no-preference){
  .az-sky{animation:azdrift 90s ease-in-out infinite alternate}
}
@keyframes azdrift{from{transform:scale(1.07) translate(-1.5%,0)}to{transform:scale(1.07) translate(1.5%,-.8%)}}

/* ---- layout ---- */
.az-in{position:relative;width:100%;max-width:1068px;margin:auto;padding:100px 24px 24px;display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:14px;align-items:stretch}

/* ---- the form, on a light card ---- */
.az-form{display:flex;flex-direction:column;min-height:570px;padding:26px 28px 22px;border-radius:24px;background:#F8F5EC;color:var(--ink);
  box-shadow:inset 0 1px 0 #fff,0 40px 70px -40px rgba(12,48,78,.6);animation:azin .8s var(--ease) both}
.az-h{font-family:var(--serif);font-weight:500;font-size:clamp(28px,2.5vw,35px);letter-spacing:-.025em;line-height:1.08;color:var(--navy)}
.az-sub{margin-top:8px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.az-prog{display:flex;gap:6px;margin-top:18px}
.az-prog[hidden]{display:none}
.az-prog i{flex:1;height:4px;border-radius:4px;background:rgba(40,18,23,.12);transition:background .4s}
.az-prog i.on{background:var(--blue)}
.az-label{margin-top:9px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.az-form form{display:flex;flex-direction:column;flex:1;margin-top:18px}
.az-form form[hidden]{display:none}
.az-step{display:none;min-width:0;margin:0;padding:0;border:0}
.az-step.on{display:grid;gap:16px;animation:pop .4s var(--ease)}
.az-form .fld{gap:7px;font-size:13.5px}
.az-form .fld input:not([type=range]){height:46px;border-radius:12px;border-width:1px;padding:0 14px;font-size:15.5px}
.az-form .f2col{gap:12px}
.az-form .opts{gap:6px}
.az-form .opt-chip{padding:8px 13px;border-width:1px;font-size:14px}
.az-form .rng output{font-size:24px}
.az-form .rng input{margin-top:6px}
.az-fine{font-size:12px;line-height:1.45;color:var(--mute)}
.az-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:20px}
.az-back{font-size:14.5px;font-weight:500;color:var(--ink-2)}
.az-back:hover{color:var(--ink)}
.az-back[hidden]{display:none}
.az-nav .btn{margin-left:auto;height:48px;min-width:164px;font-size:15.5px}
.az-nav .btn[disabled]{opacity:.6;cursor:progress}
.az-nav .az-back+.az-back{margin-left:auto}

/* the hand-off on the last step */
.az-hand{display:grid;gap:8px;justify-items:start;padding:18px 18px 16px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(40,18,23,.08)}
.az-hand b{font-family:var(--serif);font-weight:500;font-size:21px;letter-spacing:-.015em;line-height:1.2;color:var(--navy)}
.az-hand>span{font-size:14px;line-height:1.45;color:var(--ink-2)}
.az-hand .btn{height:48px;margin-top:6px;font-size:15.5px}
.az-hand .btn span{transition:translate .3s var(--ease)}
.az-hand .btn:hover span{translate:4px 0}
.az-hand .az-note{font-size:12px;color:var(--mute)}
.az-hand .az-note[hidden]{display:none}
.az-then{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:14px;background:var(--deep);font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.84)}
.az-then b{font-weight:600;color:#fff}
.az-then i{flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--lime)}

/* the done screen */
.az-form.is-done{justify-content:center}
.az-form.is-done .az-head{display:none}
.az-done{animation:pop .5s var(--ease)}
.az-done[hidden]{display:none}
.az-done .az-h{margin-top:14px}
.az-portal{margin-top:18px;padding:18px;border-radius:18px;background:var(--deep);color:#fff}
.az-portal[hidden]{display:none}
.az-portal-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.az-portal-top small{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.az-portal-top span{display:flex;align-items:center;gap:7px;font-size:12.5px;color:rgba(255,255,255,.8)}
.az-trk{display:grid;gap:8px;margin-bottom:16px}
.az-trk li{position:relative;padding-left:26px;font-size:14px;color:rgba(255,255,255,.55)}
.az-trk li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35)}
.az-trk li.ok,.az-trk li.now{color:#fff}
.az-trk li.ok::before{border-color:var(--lime);background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' stroke='%230F2E20' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.az-trk li.now::before{border-color:var(--lime);box-shadow:0 0 0 4px rgba(236,156,213,.18)}
.az-portal .btn{width:100%;height:48px;font-size:15.5px}
.az-portal .btn span{transition:translate .3s var(--ease)}
.az-portal .btn:hover span{translate:4px 0}
.az-adv{display:flex;align-items:center;gap:11px;margin-top:16px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.az-adv img{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover}
.az-adv b{color:var(--ink)}
.az-adv a{font-family:var(--mono);font-weight:500;letter-spacing:-.02em;color:var(--ink)}

/* ---- "Your file", on deep green glass. The sky shows through it; a light and a bright rim follow the pointer
        (--azx / --azy), and one sheen crosses it when something changes (.az-sweep) ---- */
.az-file{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:20px 22px 18px;border-radius:24px;color:#fff;
  background:
    radial-gradient(330px circle at var(--azx,290px) var(--azy,26px),rgba(246,212,236,.36),rgba(246,212,236,.1) 42%,transparent 68%),
    linear-gradient(152deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.06) 26%,transparent 46%),
    linear-gradient(180deg,transparent 52%,rgba(20,4,7,.42) 100%),
    rgba(48,8,15,.7);
  -webkit-backdrop-filter:blur(14px) saturate(1.6) brightness(.8);backdrop-filter:blur(14px) saturate(1.6) brightness(.8);
  box-shadow:0 40px 70px -36px rgba(10,44,70,.65);
  transition:--azx .45s ease-out,--azy .45s ease-out;
  animation:azin .8s var(--ease) .1s both}
.az-file::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:radial-gradient(320px circle at var(--azx,290px) var(--azy,26px),#fff,rgba(255,255,255,.34) 55%,rgba(255,255,255,.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.az-file::after{content:"";position:absolute;inset:0;pointer-events:none;translate:-115% 0;
  background:linear-gradient(104deg,transparent 39%,rgba(255,255,255,.1) 45%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.1) 55%,transparent 61%)}
.az-file.az-sweep::after{animation:azsweep 1.25s cubic-bezier(.4,.1,.3,1)}
.az-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.az-file-top{display:flex;align-items:center;gap:12px;margin-top:10px}
.az-mono{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--lime);color:var(--deep);font-family:var(--serif);font-size:22px;font-weight:500}
.az-file-top b{display:block;font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:-.015em;line-height:1.15;overflow-wrap:anywhere}
.az-file-top span:not(.az-mono){display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.82);overflow-wrap:anywhere}
.az-est{margin-top:14px;padding:14px 18px 13px;border-radius:18px;background:rgba(26,6,10,.44);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background .5s,box-shadow .5s}
.az-est:not(.wait){background:rgba(26,6,10,.58);box-shadow:inset 0 0 0 1px rgba(236,156,213,.5)}
.az-est small{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.az-est b{display:flex;align-items:baseline;gap:8px;margin:5px 0 6px;font-family:var(--serif);font-weight:500;font-size:40px;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap}
.az-est b em{font-style:normal;font-family:var(--sans);font-weight:400;font-size:14px;letter-spacing:0;color:rgba(255,255,255,.8)}
.az-est b em[hidden]{display:none}
.az-est.wait b{font-size:28px;letter-spacing:.02em;opacity:.45}
.az-est>span{display:block;font-size:12px;line-height:1.45;color:rgba(255,255,255,.82)}
.az-rows{margin-top:6px}
.az-rows div{display:flex;justify-content:space-between;gap:12px;padding:7px 2px;border-bottom:1px solid rgba(255,255,255,.16);font-size:13.5px}
.az-rows div.new{animation:pop .4s var(--ease)}
.az-rows dt{color:rgba(255,255,255,.8)}
.az-rows dd{font-weight:500;text-align:right;overflow-wrap:anywhere}
.az-pp{margin-top:auto;padding:13px 16px 9px;border-radius:16px;background:rgba(26,6,10,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.az-file .az-rows{margin-bottom:12px}
.az-pp[hidden]{display:none}
.az-pp b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.az-pp em{display:block;margin:1px 0 8px;font-style:normal;font-size:12px;color:var(--lime)}
.az-pp-row{display:flex;align-items:center;gap:12px;padding:7px 0;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.88)}
.az-pp-row i{flex:1;height:9px;border-radius:5px;background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.32),rgba(255,255,255,.1));background-size:200% 100%;animation:azshim 2.2s linear infinite}
.az-pp-row+.az-pp-row i{margin-right:24%;animation-delay:.4s}
.az-call{margin-top:12px;font-size:13px;color:rgba(255,255,255,.84)}
.az-call a{font-family:var(--mono);font-weight:500;letter-spacing:-.02em;color:#fff}
.az-call a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- what happens next: one row on light frosted glass. The step they are on is ringed; on hover a chip turns
        deep green like the trade cards on the home page, and catches a light under the pointer ---- */
.az-next{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.az-next li{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;color:var(--ink);background-color:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.72),0 18px 30px -22px rgba(10,44,70,.55);
  transition:background-color .3s var(--ease),color .3s,box-shadow .3s,transform .3s var(--ease);animation:azin .8s var(--ease) .2s both}
.az-next li::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(170px circle at var(--azx,50%) var(--azy,50%),rgba(236,156,213,.34),transparent 70%)}
.az-next b{flex:none;font-family:var(--serif);font-weight:500;font-size:24px;letter-spacing:-.03em;line-height:1;color:var(--blue);transition:color .3s}
.az-next strong{display:block;font-size:13.5px;font-weight:600;line-height:1.25}
.az-next em{display:block;margin-top:2px;font-style:normal;font-size:11.5px;color:var(--ink-2);transition:color .3s}
.az-next li.on{background-color:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1.5px var(--blue),0 18px 30px -22px rgba(10,44,70,.55)}
.az-next li.past b{color:var(--mute)}
.az-next li:hover{background-color:var(--deep);color:#fff;transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(236,156,213,.4),0 22px 34px -18px rgba(30,6,9,.75)}
.az-next li:hover::after{opacity:1}
.az-next li:hover b{color:var(--lime)}
.az-next li:hover em{color:rgba(255,255,255,.76)}

@keyframes azin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes azshim{to{background-position:-200% 0}}
@keyframes azsweep{from{translate:-115% 0}to{translate:115% 0}}

@media (max-width:980px){
  .az-stage{min-height:0}
  .az-in{grid-template-columns:minmax(0,1fr);padding:92px 14px 16px;gap:12px}
  .az-form{min-height:0}
  .az-next{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .az{padding:6px}
  .az-in{padding:82px 8px 10px;gap:10px}
  .az-form{padding:20px 16px 18px;border-radius:20px}
  .az-file{padding:18px 16px 16px;border-radius:20px}
  .az-form .f2col{grid-template-columns:minmax(0,1fr)}
  .az-step.on{gap:14px}
  .az-est b{font-size:36px}
  .az-next{gap:6px}
  .az-next li{padding:10px 11px;gap:9px;border-radius:14px}
  .az-next b{font-size:19px}
  .az-next strong{font-size:12.5px}
  .az-next em{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .az-form,.az-file,.az-next li,.az-step.on,.az-done{animation:none}
  .az-pp-row i{animation:none}
  .az-file{transition:none}
  .az-file.az-sweep::after{animation:none}
  .az-sky-g,.az-bg>i{transition:none}
}