/* The opening: the headline across the top, the promise on the right, Qiv's icon unfolding in the middle. */
.hero { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hero-words { position: absolute; left: 0; right: 0; top: clamp(92px, 12vh, 132px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-lockup { display: inline-flex; align-items: center; gap: 12px; text-align: left; }
.hero-lockup img { width: 44px; height: 44px; border-radius: 23%; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3); }
.hero-lockup span { display: flex; flex-direction: column; gap: 1px; }
.hero-lockup b { font-size: 17px; font-weight: 740; letter-spacing: -0.01em; }
.hero-lockup small { font-size: 13.5px; font-weight: 560; color: var(--ink-3); }
.hero-h1 { margin-top: clamp(14px, 2.2vh, 22px); font-size: clamp(46px, min(5.4vw, 8.4vh), 94px); font-weight: 830; font-stretch: 125%; line-height: 0.96; letter-spacing: -0.038em; color: var(--ink); }
.hero-h1 span { display: block; }
.hero-h1 span:last-child { color: rgba(var(--ink-rgb), 0.46); }
.hero-side { position: absolute; right: clamp(28px, 6.4vw, 120px); top: 54%; width: min(25vw, 340px); display: flex; flex-direction: column; gap: 16px; }
.hero-sub { font-size: clamp(15.5px, 1.2vw, 18px); line-height: 1.5; color: rgba(var(--ink-rgb), var(--soft)); font-weight: 430; text-wrap: pretty; }
.hero-sub b { color: var(--ink); font-weight: 680; }
.hero-for { font-size: 14px; line-height: 1.45; color: var(--ink-3); text-wrap: pretty; }
.hero-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; font-weight: 620; letter-spacing: 0.04em; color: var(--ink-3); }
.hero-cue i { width: 1.5px; height: 26px; border-radius: 1px; background: linear-gradient(rgba(var(--ink-rgb), 0), rgba(var(--ink-rgb), 0.6)); }
.curtain { position: fixed; inset: 0; z-index: 35; background: radial-gradient(ellipse 120% 90% at 70% 40%, #12402f, #0f3527 45%, #081d15 100%); pointer-events: none; color: #f2ece0; --ink-rgb: 242, 236, 224; --ink: #f2ece0; --ink-3: rgba(242, 236, 224, 0.62); }

/* the hero's screen: Qiv's icon on the tile, in its own layers, then the Estimates home on the iPhone */
.app-hero { background: #f5f6f5; }
.app-hero > * { position: absolute; left: 0; top: 0; }
/* the icon's ground: warm cream, lit from the top left */
.hx-cream { inset: 0; width: 100%; height: 100%; background: linear-gradient(145deg, #fdecd4 0%, #f6e2c5 28%, #ecd4b4 58%, #e0c4a3 84%, #d7bb9b 100%); }
.hx-app { inset: 0; }
.hx-app > * { position: absolute; left: 0; top: 0; }
.hx-mesh { inset: 0; opacity: 0; }
.hx-sb { width: 393px; height: 50px; }
.hx-brand { left: 20px; top: 60px; width: 36px; height: 36px; border-radius: 10px; }
.hx-title { left: 64px; top: 57px; }
.hx-sub { left: 65px; top: 86px; }
.hx-gear { left: 290px; top: 58px; width: 40px; height: 40px; border-radius: 20px; }
.hx-moon { left: 337px; top: 58px; width: 40px; height: 40px; border-radius: 20px; }
.hx-dots { left: 172px; top: 110px; width: 49px; height: 12px; border-radius: 6px; }
.hx-rail { left: 16px; top: 376px; width: 361px; height: 44px; }
.hx-card { left: 16px; top: 432px; width: 361px; height: 164px; border-radius: 26px; overflow: hidden; }
.hx-card2 { left: 16px; top: 608px; width: 361px; height: 106px; border-radius: 26px; overflow: hidden; }
.hx-card .qc-knob { opacity: 0; }
.hx-new { left: 20px; top: 738px; width: 353px; height: 52px; border-radius: 26px; }
.hx-dock { left: 18px; top: 806px; width: 357px; height: 64px; border-radius: 32px; }
.hx-lens { left: 27px; top: 812px; width: 75px; height: 52px; border-radius: 26px; }
.hx-tab { top: 808px !important; width: 85px; height: 60px; }

/* the slate quote: a cut-out card with a moat round the page, that becomes the dark Estimates summary */
.hx-slate-sh { border-radius: 23px; box-shadow: 0 6px 10px -3px rgba(64, 40, 16, 0.5), 0 14px 26px -6px rgba(64, 40, 16, 0.3); }
.hx-slate { overflow: hidden; border-radius: 23px;
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 205 254' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='-300' y='-300' width='900' height='900'%3E%3Crect x='-300' y='-300' width='900' height='900' fill='white'/%3E%3Crect x='142' y='38' width='216' height='274' rx='35' fill='black'/%3E%3Cpath d='M-89 -119 L181 166 L-89 451 Z' fill='white'/%3E%3Cpath d='M127 109 L181 166 L127 223' fill='none' stroke='white' stroke-width='38' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='205' height='254' fill='white' mask='url(%23m)'/%3E%3C/svg%3E"), linear-gradient(rgba(0, 0, 0, var(--fill, 0)), rgba(0, 0, 0, var(--fill, 0)));
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 205 254' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='-300' y='-300' width='900' height='900'%3E%3Crect x='-300' y='-300' width='900' height='900' fill='white'/%3E%3Crect x='142' y='38' width='216' height='274' rx='35' fill='black'/%3E%3Cpath d='M-89 -119 L181 166 L-89 451 Z' fill='white'/%3E%3Cpath d='M127 109 L181 166 L127 223' fill='none' stroke='white' stroke-width='38' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='205' height='254' fill='white' mask='url(%23m)'/%3E%3C/svg%3E"), linear-gradient(rgba(0, 0, 0, var(--fill, 0)), rgba(0, 0, 0, var(--fill, 0)));
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.hx-slate.whole { -webkit-mask-image: none; mask-image: none; }
.hx-slate > * { position: absolute; left: 0; top: 0; }
.hx-slate-blue { inset: 0; width: 100%; height: 100%; background: linear-gradient(176deg, #6a7385 0%, #616b7d 40%, #5a6577 70%, #566173 100%); box-shadow: inset 1.2px 1.5px 0 rgba(255, 246, 230, 0.32), inset -1px -1.5px 0 rgba(30, 36, 48, 0.25); }
.hx-slate-dark { inset: 0; width: 100%; height: 100%; opacity: 0; background: linear-gradient(150deg, #0e1114 0%, #122421 52%, #235a4b 100%); }
.hx-hero { width: 361px; height: 238px; opacity: 0; background: none; transform-origin: 0 0; }

/* the page: cream stock with a bite for the arrow; its badge and lines sit on it (512-unit layout, scaled) */
.hx-pgwrap { width: 198px; height: 256px; transform-origin: 0 0; }
.hx-pgwrap > * { position: absolute; left: 0; top: 0; }
/* the page's shadow follows its outline, bite and all (a box's shadow would darken the arrow sitting in the bite) */
.hx-pg-sh { display: none; }
.hx-pg { width: 198px; height: 256px; }
.hx-pgsvg { width: 198px; height: 256px; overflow: visible; filter: drop-shadow(0 0 2.5px rgba(70, 42, 14, 0.45)) drop-shadow(0 6px 8px rgba(70, 42, 14, 0.36)); }
.hx-pgsvg .pg-white { opacity: 0; }
.hx-pg > * { position: absolute; left: 0; top: 0; }
.hx-pl { height: 11px; border-radius: 5.5px; background: linear-gradient(180deg, #67625a, #5a554d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 0 rgba(255, 250, 240, 0.7); transform-origin: 0 0; }
.hx-plg { height: 13px; border-radius: 6.5px; background: linear-gradient(180deg, #17906a, #0f7f5c); }
.hx-badge { width: 78px; height: 78px; border-radius: 16px; overflow: hidden; transform-origin: 0 0;
  background: linear-gradient(176deg, #1a8e6c 0%, #128864 50%, #0b8460 100%);
  box-shadow: inset 0 1.6px 0 rgba(150, 225, 190, calc(0.55 * (1 - var(--flat, 0)))), inset 0 -1.5px 0 rgba(0, 60, 40, calc(0.3 * (1 - var(--flat, 0)))), 0 2px 3px rgba(40, 50, 25, calc(0.4 * (1 - var(--flat, 0)))), 0 7px 12px -3px rgba(50, 40, 15, calc(0.42 * (1 - var(--flat, 0)))); }

/* the Quoted pill's own tint on the PDF's paper, opaque, so the badge's green is gone beneath it */
.hx-bmint { position: absolute; inset: 0; background: #deeae4; opacity: 0; }
.hx-check { position: absolute; left: 0; top: 0; width: 78px; height: 78px; }
.hx-check path { fill: none; stroke: #f1ecda; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }

/* the arrow: rounded, inked green, its shadow falling into the page's bite */
.hx-chev { width: 86px; height: 132px; overflow: visible !important; transform-origin: 0 0; filter: drop-shadow(1.5px 4px 4.5px rgba(60, 36, 12, var(--chsh, 0.62))); }
.hx-chev path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hx-chev path { stroke-width: 38; }
/* its edges: a dark lower rim and a light upper rim peek out from under the ink */
.hx-chev .c-dark { stroke: #135a43; transform: translate(0.9px, 1.4px); opacity: calc(1 - var(--towhite, 0)); }
.hx-chev .c-rim { stroke: #a6e0c6; transform: translate(-1px, -1.5px); opacity: calc(0.75 * (1 - var(--towhite, 0))); }
.hx-chev .c-ink { stroke: url(#hx-chev-g); }
.hx-chev .c-white { stroke: #f4f6f5; opacity: calc(var(--towhite, 0) * (1 - var(--toslate, 0))); }
.hx-chev .c-slate { stroke: #20252a; opacity: var(--toslate, 0); }

/* the tile's glaze: a soft sheen from the top left and a glint that walks as it turns */
.hx-spec { inset: 0; width: 100%; height: 100%; pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.08) 26%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(118deg, rgba(255, 255, 255, 0) calc(var(--gl, 40%) - 16%), rgba(255, 255, 255, 0.16) var(--gl, 40%), rgba(255, 255, 255, 0) calc(var(--gl, 40%) + 16%));
  box-shadow: inset 0 2px 1px -1px rgba(255, 255, 255, 0.55), inset 0 -10px 18px -12px rgba(120, 80, 40, 0.28); }

/* the page in the air: the icon's page first, the estimate's PDF as it rises (both in the PDF's 400 × 518) */
.hx-air { position: absolute; left: 0; top: 0; width: 400px; height: 518px; transform-origin: 0 0; visibility: hidden; }
.hx-air .hx-pgwrap { transform: scale(2.0202); }
.hx-air .hx-pgsvg { filter: drop-shadow(0 calc(1px + var(--lift, 0) * 2px) calc(1.5px + var(--lift, 0) * 3px) rgba(60, 38, 14, calc(0.42 - var(--lift, 0) * 0.16))) drop-shadow(0 calc(6px + var(--lift, 0) * 12px) calc(8px + var(--lift, 0) * 14px) rgba(30, 22, 12, calc(0.34 + var(--lift, 0) * 0.08))); }
.hx-air .pp { background: transparent; opacity: 0; }
.hx-air .pp .pp-pill, .hx-air .pp .pl-d, .hx-air .pp .pp-grand { opacity: var(--land, 0); }