/* The home page. Tall screens (phones, tablets) keep the approved 430 by 739 phone composition, scaled to fit;
   wide screens (html.wide, set by home.js) lay the same pieces out side by side. Every motion is a function of
   one clock and the scroll, so it runs with no input and records frame-exactly. */
body[data-page=index] .sheen { animation: none; }

/* hero */
#hero { position: relative; height: max(var(--vh), 640px); overflow: hidden; }
.markwrap { position: fixed; left: 0; top: 0; width: 100%; height: 0; z-index: 30; pointer-events: none; }
.mk { position: absolute; }
.mk video, .mk img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk img { opacity: 0; }
#hero h1 { position: absolute; left: 20px; right: 12px; z-index: 31; font-family: var(--display); font-weight: 800;
  font-stretch: 96%; line-height: 1.04; letter-spacing: -0.012em; color: var(--ink); }
#hero h1 span { display: block; width: max-content; max-width: 100%; white-space: nowrap; will-change: transform; }
.hchips { position: absolute; left: 20px; right: 14px; z-index: 31; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.hchip { height: 34px; padding: 0 14px; border-radius: 17px; background: rgba(255,255,255,.66); color: var(--ink); font: 600 14.5px/34px var(--body); white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(11,27,43,.12) inset, 0 8px 14px -10px rgba(11,27,43,.5); will-change: transform, opacity; }
#hero .cta { position: absolute; left: 20px; z-index: 31; }
.note { position: absolute; left: 20px; right: 24px; z-index: 31; font-size: 14.5px; line-height: 1.42; color: #22344a; }
html.wide #hero h1, html.wide .hchips, html.wide .note { left: 0; right: 0; text-align: center; justify-content: center; }
html.wide #hero h1 span { margin: 0 auto; }
html.wide .hchip { height: 40px; padding: 0 18px; border-radius: 20px; font-size: 16.5px; line-height: 40px; }
html.wide .note { font-size: 16px; }
html.wide #hero .cta { left: 50%; margin-left: calc(var(--ctaw, 220px) / -2); }

/* the hourglass: an alpha video of the Blender render, two lines that slam down, two labels that trade ends */
#time { position: relative; height: calc(var(--vh) * 2.2); }
#time .stick, #work .stick { position: sticky; top: 0; height: var(--vh); overflow: hidden; }
#time .hg { position: absolute; z-index: 3; }
#time .hg video { width: 100%; height: 100%; }
.slam { position: absolute; z-index: 8; font-family: var(--display); font-weight: 900; font-stretch: 104%; line-height: 1; letter-spacing: -0.015em;
  color: var(--blue); white-space: nowrap; will-change: transform, opacity; opacity: 0; transform-origin: 50% 100%; }
.slam.ghost { z-index: 7; color: rgba(0,74,172,.35); }
.ring { position: absolute; z-index: 6; border: 3px solid var(--blue); border-radius: 50%; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.tag { position: absolute; left: 0; top: 0; z-index: 5; height: 40px; padding: 0 16px; border-radius: 20px; background: var(--yellow); color: var(--ink); font: 700 17px/40px var(--body); white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 18px -12px rgba(11,27,43,.6); will-change: transform; }
#tagWork { z-index: 6; background: var(--navy); color: #fff; }
.tag::before { content: ''; position: absolute; right: 100%; top: 50%; width: 30px; height: 2px; background: var(--ink); opacity: .55; }
#hgArrow { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; }
html.wide .tag { height: 46px; padding: 0 20px; border-radius: 23px; font-size: 20px; line-height: 46px; }

/* the work: a sticky stage whose track moves sideways with the scroll */
#work { position: relative; height: calc(var(--vh) * 5.6); }
.track { position: absolute; top: 0; left: 0; height: 100%; display: flex; will-change: transform; }
.panel { position: relative; width: 100vw; height: 100%; overflow: hidden; }
.frame { position: absolute; left: 0; top: 0; width: 430px; height: 739px; transform-origin: 0 0; }
.comp { position: absolute; inset: 0; perspective: 950px; }
.cin { position: absolute; left: 0; top: 0; width: 430px; height: 739px; }
.txt h2 { position: absolute; left: 20px; right: 28px; top: 80px; white-space: nowrap; font-family: var(--display); font-weight: 800; font-stretch: 96%;
  font-size: 36px; line-height: 1.02; letter-spacing: -0.012em; z-index: 5; }
.panel.on-blue::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,18,55,.34), rgba(0,18,55,0) 24%, rgba(0,18,55,0) 50%, rgba(0,18,55,.64)); }
.panel .frame { z-index: 3; }
.on-blue .lead { text-shadow: 0 1px 2px rgba(0,20,60,.35); }
/* the lead and its chips sit above the cue, growing upward with a longer lead */
.txt .lc { position: absolute; left: 20px; right: 22px; bottom: 63px; z-index: 5; display: flex; flex-direction: column; gap: 10px; }
.txt .lead { font-size: 17px; line-height: 1.42; }
.phone { position: absolute; left: 34px; top: 146px; width: 186px; border-radius: 32px; padding: 7px; z-index: 3;
  background: linear-gradient(145deg, #2a2f36, #0d1014 45%, #1b1f25); transform-style: preserve-3d; will-change: transform;
  box-shadow: 0 0 0 1.5px #4a5059 inset, 0 2px 0 rgba(255,255,255,.18) inset, 0 50px 60px -34px rgba(0,0,0,.65), 0 18px 24px -18px rgba(0,0,0,.5); }
.phone.slim { left: 12px; width: 168px; }
.scr { position: relative; border-radius: 26px; overflow: hidden; background: #000; }
.scr .status { height: 22px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 20px; font: 600 9.5px/1 var(--body); }
.scr .island { position: absolute; top: 6px; left: 50%; width: 52px; height: 15px; margin-left: -26px; border-radius: 8px; background: #000; z-index: 3; }
.scr .page { position: relative; overflow: hidden; }
.scr .page img { position: absolute; left: 0; top: 0; width: 100%; will-change: transform, opacity; }
.scr .bar { height: 34px; display: flex; align-items: center; justify-content: center; }
.scr .bar span { display: inline-block; padding: 5px 14px; border-radius: 10px; font: 500 9.5px/1 var(--body); }
.light .status, .light .bar { background: #fff; color: #111; } .light .bar span { background: #eef0f3; }
.dark .status, .dark .bar { background: #0b0d12; color: #e8e8ea; } .dark .bar span { background: #1d2028; }
/* every screen catches the plate's moving light */
.scr::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(112deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 58%) no-repeat;
  background-size: 320% 100%; background-position: var(--gx, 120%) 0; }
.step { position: absolute; z-index: 4; border-radius: 14px; overflow: hidden; will-change: transform;
  box-shadow: 0 2px 0 rgba(255,255,255,.25) inset, 0 40px 50px -28px rgba(0,0,0,.6), 0 12px 18px -12px rgba(0,0,0,.45); }
.step img { width: 100%; }
/* drill-downs: each view pops out of the one before it */
.pop { position: absolute; z-index: 4; border-radius: 12px; overflow: hidden; will-change: transform, opacity; opacity: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 34px 44px -24px rgba(0,0,0,.65), 0 10px 16px -10px rgba(0,0,0,.45); }
.pop img { width: 100%; display: block; }
.ptag { position: absolute; left: 8px; bottom: 8px; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--yellow); color: var(--ink);
  font: 700 13px/26px var(--body); white-space: nowrap; box-shadow: 0 4px 10px -6px rgba(0,0,0,.6); }
.pop .ptag.tr { top: 8px; bottom: auto; left: auto; right: 8px; }
.pop .ptag.br { left: auto; right: 8px; }
.pop.ov { overflow: visible; } .pop.ov img { border-radius: 12px; }
.pop .ptag.up { top: -32px; bottom: auto; }
.pop .ptag.tab { top: -18px; bottom: auto; left: auto; right: 10px; }
.cue { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 20; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 14px; border-radius: 17px; background: rgba(255,255,255,.92); color: var(--navy); font: 700 13px/1 var(--body); white-space: nowrap;
  box-shadow: 0 8px 18px -10px rgba(11,27,43,.5); }
.cue b { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: #c3cad6; margin-left: 4px; transition: background .2s; }
.cue b.on { background: var(--blue); }
/* wide: the words on the left, the phone and its pop-outs on the right at --sc */
html.wide .frame { width: 100%; height: 100%; transform: none !important; left: 0 !important; top: 0 !important; }
html.wide .txt { position: absolute; left: max(48px, 7vw); width: min(470px, 36vw); top: 50%; transform: translateY(-50%); z-index: 5; }
html.wide .txt h2 { position: static; white-space: normal; font-size: clamp(44px, 4.4vw, 64px) !important; }
html.wide .txt .lc { position: static; margin-top: 18px; gap: 18px; }
html.wide .txt .lead { font-size: 19px !important; }
html.wide .comp { left: auto; right: max(28px, 8vw); top: 50%; width: 430px; height: 430px; inset: auto; right: max(28px, 7vw); top: 50%;
  transform: translateY(-50%) scale(var(--sc, 1.3)); transform-origin: 100% 50%; }
html.wide .cin { top: -130px; }

/* inside BlueTopaz: its features one beat at a time, each shown with the app's own screens */
#inside { position: relative; color: #fff; padding-bottom: 56px; }
#inside .bg { position: sticky; top: 0; height: var(--vh); margin-bottom: calc(-1 * var(--vh)); overflow: hidden; }
#inside .inr { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
#inside .ih { padding: 92px 20px 0; }
#inside h2 { font-family: var(--display); font-weight: 800; font-stretch: 96%; font-size: 40px; letter-spacing: -0.012em; line-height: 1.02; }
#inside .ih p { margin-top: 12px; font-size: 17px; line-height: 1.42; }
#inside .ih .chips { margin-top: 14px; }
.beat { position: relative; padding: 54px 20px 0; display: flex; flex-direction: column; }
.beat .bt { display: contents; }
.beat .bn { font-family: var(--display); font-weight: 900; font-stretch: 110%; font-size: 60px; line-height: .86; letter-spacing: -0.02em; color: var(--yellow);
  text-shadow: 0 2px 0 rgba(0,22,70,.45), 0 10px 22px rgba(0,22,70,.3); will-change: transform, opacity; }
.beat h3 { margin-top: 8px; font-family: var(--display); font-weight: 800; font-stretch: 96%; font-size: 27px; letter-spacing: -0.01em; line-height: 1.06; }
.beat .bt > p { margin-top: 8px; font-size: 16.5px; line-height: 1.42; }
.beat .stage { position: relative; margin: 20px -6px 0; order: 1; }
.beat .saved { order: 2; margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.beat .saved span { height: 30px; padding: 0 12px; border-radius: 15px; font: 600 13.5px/30px var(--body); background: rgba(255,214,90,.16); color: #FFE08A;
  box-shadow: 0 0 0 1px rgba(255,214,90,.5) inset; white-space: nowrap; }
.sin { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.beat .card { position: absolute; z-index: 3; border-radius: 12px; opacity: 0; will-change: transform, opacity;
  box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 30px 40px -22px rgba(0,10,40,.72), 0 8px 14px -8px rgba(0,10,40,.5); }
.beat .card img { width: 100%; display: block; border-radius: inherit; }
.beat .card .ptag { top: -13px; bottom: auto; left: 10px; }
.beat .card .ptag.up { top: -32px; } .beat .card .ptag.dn { top: auto; bottom: -32px; } .beat .card .ptag.eb { top: auto; bottom: -13px; }
.beat .card .ptag.r { left: auto; right: 10px; }
.beat .card.paper { border-radius: 3px; }
.beat .phone { left: 0; top: 0; opacity: 0; }
.beat svg.arrow { position: absolute; left: 0; top: 0; z-index: 6; overflow: visible; pointer-events: none; }
html.wide #inside .inr { max-width: 1240px; padding: 0 max(28px, 4vw); }
html.wide #inside .ih { padding: 120px 0 10px; max-width: 760px; }
html.wide #inside h2 { font-size: clamp(48px, 4.8vw, 72px); }
html.wide #inside .ih p { font-size: 20px; }
html.wide .beat { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; column-gap: 6vw; align-items: center; padding: 80px 0 0; }
html.wide .beat .bt { display: block; }
html.wide .beat .bn { font-size: 96px; }
html.wide .beat h3 { font-size: 36px; }
html.wide .beat .bt > p { font-size: 19px; }
html.wide .beat .stage { margin: 0; justify-self: end; }

/* the offer: Acuity's three rows on yellow */
#offer { position: relative; overflow: hidden; min-height: max(var(--vh), 640px); display: flex; align-items: center; }
#offer .oin { width: 100%; }
#offer .oin { position: relative; z-index: 5; padding: 84px 14px 40px; max-width: 640px; margin: 0 auto; }
#offer h2 { padding-left: 6px; font-family: var(--display); font-weight: 800; font-stretch: 96%; font-size: 36px; letter-spacing: -0.012em; line-height: 1.02; }
.rows { margin-top: 20px; display: grid; gap: 10px; }
.row { position: relative; background: #FBFBF9; border-radius: 16px; padding: 14px 16px; will-change: transform, opacity;
  box-shadow: 0 1px 0 #fff inset, 0 18px 26px -18px rgba(60,40,0,.55), 0 2px 6px -2px rgba(60,40,0,.25); }
.row .nm { font: 700 17px/1.2 var(--body); }
.row .fmt { font: 650 15px/1.2 var(--body); color: var(--blue); margin-top: 3px; }
.row .ds { font-size: 14.5px; line-height: 1.38; margin-top: 7px; color: #22303f; padding-right: 70px; }
.row .cs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.row .c { height: 26px; padding: 0 10px; border-radius: 13px; background: #EEF1F6; font: 600 13px/26px var(--body); white-space: nowrap; }
.row .go { position: absolute; right: 14px; top: 14px; height: 34px; padding: 0 14px; border-radius: 17px; background: var(--yellow); font: 700 13.5px/34px var(--body); letter-spacing: .02em;
  text-decoration: none; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 12px -8px rgba(60,40,0,.6); }
html.wide #offer { display: flex; align-items: center; }
html.wide #offer .oin { max-width: 1240px; width: 100%; padding: 110px max(28px, 4vw) 70px; }
html.wide #offer h2 { font-size: clamp(48px, 4.8vw, 72px); padding: 0; }
html.wide .rows { grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; align-items: stretch; }
html.wide .row { padding: 26px 24px 24px; display: flex; flex-direction: column; border-radius: 20px; }
html.wide .row .nm { font-size: 22px; }
html.wide .row .fmt { font-size: 19px; margin-top: 6px; }
html.wide .row .ds { font-size: 16.5px; padding-right: 0; margin-top: 12px; flex: 1; }
html.wide .row .cs { margin-top: 16px; }
html.wide .row .go { position: static; align-self: flex-start; margin-top: 18px; height: 46px; line-height: 46px; padding: 0 24px; border-radius: 23px; font-size: 15px; }

/* Tony: his real photo wider than the screen, his name a layer behind him, a card in front.
   The SBA icon sits in the card, unaltered and never moved. */
#tony { position: relative; overflow: hidden; height: max(var(--vh), 640px); }
.tframe { position: absolute; left: 0; top: 0; width: 430px; height: 739px; transform-origin: 0 0; }
#tony .name { position: absolute; left: 0; right: 0; top: 108px; z-index: 2; text-align: center; font-family: var(--display); font-weight: 900; font-stretch: 110%;
  font-size: 58px; letter-spacing: -0.02em; line-height: 1; color: var(--yellow); white-space: nowrap; will-change: transform;
  text-shadow: 0 2px 0 rgba(0,22,70,.45), 0 10px 24px rgba(0,22,70,.35); }
#tony .me { position: absolute; left: 50%; width: 560px; height: auto; max-width: none; margin-left: -280px; top: 92px; z-index: 3; filter: drop-shadow(0 22px 26px rgba(0,10,40,.45)); will-change: transform; }
#tony .tcard { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 5; border-radius: 18px; padding: 18px 18px 16px; color: var(--ink);
  background: #E0B72A url(../assets/plate-yellow.webp) center/cover; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 30px 40px -24px rgba(0,10,40,.6); }
#tony .tcard > p { font-size: 17px; line-height: 1.42; }
.vosb { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.vosb img { flex: none; width: 70px; height: auto; border-radius: 2px; box-shadow: 0 6px 14px -8px rgba(40,20,0,.55); }
.vosb p { font: 800 19px/1.15 var(--display); font-stretch: 96%; letter-spacing: -0.005em; }
html.wide .tframe { width: 100%; height: 100%; transform: none !important; }
html.wide #tony .name { top: 7vh; font-size: clamp(80px, 11vw, 170px); }
html.wide #tony .me { left: 38%; width: auto; height: 84%; top: auto; bottom: -2%; margin-left: 0; transform-origin: 50% 100%; }
html.wide #tony .tcard { left: auto; right: max(28px, 6vw); top: 50%; bottom: auto; width: min(430px, 34vw); padding: 26px 26px 24px; margin-top: 6vh; }
html.wide #tony .tcard > p { font-size: 20px; }
html.wide .vosb img { width: 84px; }
html.wide .vosb p { font-size: 22px; }

/* the close: the end card lands above the button */
#close { position: relative; overflow: hidden; min-height: max(var(--vh), 640px); display: flex; flex-direction: column; }
#close .ec { position: relative; z-index: 3; margin: 0 auto; }
#close .ec video { width: 100%; height: 100%; }
#close .cl { position: relative; z-index: 5; text-align: center; padding: 0 20px; }
#close .cl h2 { font-family: var(--display); font-weight: 800; font-stretch: 96%; font-size: 30px; letter-spacing: -0.012em; line-height: 1.04; }
#close .cta2 { margin-top: 18px; height: 56px; padding: 0 30px; border-radius: 28px; font-size: 17px; will-change: transform; }
#close .mail { display: block; width: max-content; margin: 16px auto 0; font: 600 16px/1 var(--body); color: var(--navy); padding: 6px; }
#close .foot { margin-top: auto; }
html.wide #close .cl h2 { font-size: clamp(40px, 3.6vw, 56px); }
@media (prefers-reduced-motion: reduce) { .sheen { display: none; } }