/* ============================================================
   Landing and sign-in
   Built on the Ahoy tokens in theme.css. The demo is plain HTML,
   animated with opacity and transform only on one shared 11s loop,
   so nothing moves the layout, and it rests fully drawn for anyone
   who prefers reduced motion.
   ============================================================ */

.landing { min-height: 100vh; display: flex; flex-direction: column; }

.land-top { display: flex; align-items: center; justify-content: space-between; gap: 16px;
            padding: 22px clamp(20px, 5vw, 64px); max-width: 1360px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.land-brand { display: flex; align-items: center; gap: 12px; }
.land-name { font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.land-by { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); }
.land-top-note { font-size: 13px; color: var(--txt-3); }

/* copy and demo on the left, sign-in on the right; stacked in reading order on phones */
.land-main {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  grid-template-areas: "copy auth" "demo auth";
  column-gap: clamp(32px, 5vw, 72px); row-gap: 30px; align-items: start;
  padding: 18px clamp(20px, 5vw, 64px) 56px; max-width: 1360px; width: 100%; margin: 0 auto; box-sizing: border-box;
}
.land-copy { grid-area: copy; }
.demo { grid-area: demo; }
.land-auth { grid-area: auth; position: sticky; top: 24px; }

.land-h { font-size: clamp(32px, 3.5vw, 50px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 800;
          margin: 0 0 16px; color: var(--txt-1); text-wrap: balance; }
.land-h span { display: block; color: var(--blue); }
.land-sub { font-size: 16px; line-height: 1.6; color: var(--txt-2); max-width: 640px; margin: 0; }

.land-auth .auth-card { max-width: none; }
.land-note { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-1); font-size: 12.5px; color: var(--txt-3); text-align: center; }

/* ---------------- the demo: a document being read ---------------- */
.demo { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .95fr); align-items: center; max-width: 820px; }

.demo-doc { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line-1); border-radius: 12px;
            box-shadow: var(--shadow-pop); padding: 22px 22px 18px; font-size: 10.5px; color: #1e2740; line-height: 1.45;
            transform: rotate(-1.2deg); }
.dd-top { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid #1c3d6e; margin-bottom: 12px; }
.dd-vendor { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 3px; }
.dd-small { color: #6a7690; font-size: 9.5px; }
.dd-title { font-weight: 800; color: #1c3d6e; font-size: 12px; letter-spacing: .02em; white-space: nowrap; }
.dd-meta { display: grid; gap: 4px; margin-bottom: 12px; }
.dd-meta div, .dd-lines div, .dd-tot div { display: flex; justify-content: space-between; gap: 10px; }
.dd-meta span, .dd-tot span { color: #6a7690; }
.dd-meta b, .dd-lines b, .dd-tot b { font-family: var(--font-mono); font-weight: 600; }
.dd-lines { border-top: 1px solid #d7deec; padding-top: 6px; margin-bottom: 10px; display: grid; gap: 5px; }
.dd-lines span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-tot { display: grid; gap: 3px; margin-left: 38%; }
.dd-tot .grand { margin-top: 3px; padding-top: 5px; border-top: 1px solid #d7deec; font-size: 12px; }
.dd-tot .grand span { color: #1e2740; font-weight: 700; }

/* where each value was found: the box sits outside the text, so nothing reflows */
.hl { position: relative; }
.hl::after { content: ''; position: absolute; inset: -3px -5px; border: 1.5px solid var(--blue); border-radius: 4px;
             background: rgba(0, 102, 255, .07); opacity: 0; }
.hl::before { position: absolute; left: -5px; bottom: calc(100% + 4px); font-family: var(--font-mono); font-size: 7.5px;
              font-weight: 700; letter-spacing: .08em; color: #fff; background: var(--blue); padding: 1px 4px; border-radius: 3px;
              opacity: 0; white-space: nowrap; }
.h1::before { content: 'VENDOR'; }
.h2::before { content: 'TAX ID'; bottom: auto; top: 50%; left: calc(100% + 9px); transform: translateY(-50%); }  /* the vendor line sits right above */
.h3::before { content: 'INVOICE NO'; }
.h4::before { content: 'TOTAL'; left: auto; right: -5px; }
.h2::after, .h3::after, .h4::after { border-color: #e08a00; background: rgba(255, 162, 0, .09); }
.h2::before, .h3::before, .h4::before { background: #b36b00; }

.demo-beam { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0;
             background: linear-gradient(180deg, transparent 0%, rgba(0, 102, 255, .10) 44%, rgba(0, 102, 255, .45) 50%, transparent 51%); }

/* the answer, overlapping the page */
.demo-read { position: relative; z-index: 3; margin-left: -10px; background: rgba(255, 255, 255, .94);
             backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--line-1); border-radius: 16px;
             box-shadow: var(--shadow-pop); padding: 14px 14px 12px; }
.dr-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; padding: 2px 4px 10px; }
.dr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex: none; }
.dr-time { margin-left: auto; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--txt-3); opacity: 0; }
.dr-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 3px; align-items: center;
          padding: 7px 4px; border-top: 1px solid var(--line-1); font-size: 12px; opacity: 0; }
.dr-row .k { font-size: 11px; color: var(--txt-3); }
.dr-row .v { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-row .v.mono { font-family: var(--font-mono); font-size: 11.5px; }
.dr-row .c { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: #00744a; background: var(--green-soft);
             padding: 1px 6px; border-radius: 999px; }
.dr-row em { grid-column: 2 / 4; font-style: normal; font-size: 10px; font-weight: 600; color: #9a6200; }
.dr-row.ind .v { display: inline-flex; align-items: center; gap: 5px; color: var(--blue-deep); }
.dr-row.ok .v { color: #00744a; }
.dr-sign { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px; border-radius: 12px;
           background: var(--green-soft); font-size: 12px; line-height: 1.35; opacity: 0; }
.dr-sign b { color: #00744a; }
.sig-ava { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
           background: #00744a; color: #fff; font-size: 11px; font-weight: 700; }

/* ---------------- one 11s loop, every step placed on it ---------------- */
.demo-beam { animation: beam 11s ease-in-out infinite; }
.dr-dot { animation: dot 11s linear infinite; }
.dr-time { animation: show-t 11s infinite; }
.h1::after, .h1::before { animation: hl1 11s infinite; }
.h2::after, .h2::before { animation: hl2 11s infinite; }
.h3::after, .h3::before { animation: hl3 11s infinite; }
.h4::after, .h4::before { animation: hl4 11s infinite; }
.r1 { animation: in1 11s infinite; }
.r2 { animation: in2 11s infinite; }
.r3 { animation: in3 11s infinite; }
.r4 { animation: in4 11s infinite; }
.r5 { animation: in5 11s infinite; }
.r6 { animation: in6 11s infinite; }
.dr-sign { animation: in7 11s infinite; }

@keyframes beam { 0% { opacity: 0; transform: translateY(-55%); } 3% { opacity: 1; } 27% { opacity: 1; transform: translateY(55%); } 31%, 100% { opacity: 0; transform: translateY(55%); } }
@keyframes dot { 0%, 29% { background: var(--blue); opacity: 1; } 14% { opacity: .35; } 31%, 100% { background: var(--green); opacity: 1; } }
@keyframes show-t { 0%, 29% { opacity: 0; } 31%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes hl1 { 0%, 6% { opacity: 0; } 8%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes hl2 { 0%, 10.5% { opacity: 0; } 12.5%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes hl3 { 0%, 15% { opacity: 0; } 17%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes hl4 { 0%, 20.5% { opacity: 0; } 22.5%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes in1 { 0%, 8% { opacity: 0; transform: translateX(10px); } 10.5%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes in2 { 0%, 12.5% { opacity: 0; transform: translateX(10px); } 15%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes in3 { 0%, 17% { opacity: 0; transform: translateX(10px); } 19.5%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes in4 { 0%, 22.5% { opacity: 0; transform: translateX(10px); } 25%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes in5 { 0%, 29% { opacity: 0; transform: translateX(10px); } 31.5%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes in6 { 0%, 35% { opacity: 0; transform: translateX(10px); } 37.5%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes in7 { 0%, 44% { opacity: 0; transform: scale(.96); } 47%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .demo-beam { animation: none; opacity: 0; }
  .dr-dot { animation: none; background: var(--green); }
  .dr-time, .dr-row, .dr-sign, .hl::after, .hl::before { animation: none; opacity: 1; transform: none; }
}

/* ---------------- what it does ---------------- */
.land-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
              padding: 0 clamp(20px, 5vw, 64px) 40px; max-width: 1360px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.feat { background: rgba(255, 255, 255, .78); border: 1px solid var(--line-1); border-radius: var(--radius); padding: 20px 20px 18px; }
.feat-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); margin-bottom: 12px; }
.feat h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.feat p { font-size: 13.5px; line-height: 1.6; color: var(--txt-2); margin: 0; }

.land-ind { padding: 8px clamp(20px, 5vw, 64px) 40px; max-width: 1360px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.land-ind-list { display: flex; flex-wrap: wrap; gap: 8px; }
.land-ind-list span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; border-radius: 999px;
                      background: rgba(255, 255, 255, .8); border: 1px solid var(--line-1); font-size: 13px; color: var(--txt-2); }
.land-ind-list svg { color: var(--blue); }

.land-foot { margin-top: auto; padding: 22px clamp(20px, 5vw, 64px); text-align: center; font-size: 12px; color: var(--txt-4); }

/* ---------------- narrower screens ---------------- */
@media (max-width: 1080px) {
  .land-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "auth" "demo"; }
  .land-auth { position: static; max-width: 460px; }
  .land-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .land-top-note { display: none; }
  .land-sub { font-size: 15.5px; }
  .demo { grid-template-columns: minmax(0, 1fr); }
  .demo-doc { transform: none; }
  .demo-read { margin: -26px 12px 0; }
  .land-feats { grid-template-columns: minmax(0, 1fr); }
}