/* UI_SPEC three-four: generic book-fold device; owner-approved code-drawn static demonstration. */
.arfx-hp{--hp-shell:#EDEEF1;--hp-shell2:#C4C6CC;--hp-edge:#FFFFFF;--hp-screen:#FFFFFF;--hp-line:#E3E3E6;--hp-shadow:rgba(0,0,0,.24);position:relative;display:grid;grid-template-columns:.9fr 1.1fr;min-height:560px;border-radius:28px;background:linear-gradient(160deg,#C9FF5E,#B8FF3D 55%,#A9F02C);overflow:hidden;color:#111;box-sizing:border-box}
html[data-bigbit-theme="dark"] .arfx-hp,.arfx-hp[data-hero-phone-theme="dark"]{--hp-shell:#2B2B2E;--hp-shell2:#0B0B0C;--hp-edge:#55555A;--hp-screen:#0E0E10;--hp-line:#2C2C2E;--hp-shadow:rgba(0,0,0,.6)}
.arfx-hp *,.arfx-hp-scene *{box-sizing:border-box}
.arfx-hp-copy{padding:56px;display:flex;flex-direction:column;gap:20px;justify-content:center;min-width:0}
.arfx-hp-copy h1{margin:0;font-size:56px;line-height:1.1;font-weight:600;letter-spacing:-1px;text-wrap:balance}
.arfx-hp-copy p{margin:0;font-size:18px;line-height:1.6;max-width:420px;text-wrap:pretty}
.arfx-hp-actions{display:flex;flex-wrap:wrap;gap:12px}
.arfx-hp-actions a{height:48px;padding:0 28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none}
.arfx-hp-primary{background:#111;color:#fff}.arfx-hp-secondary{background:#fff;color:#111}
.arfx-hp-actions a:focus-visible{outline:2px solid #111;outline-offset:4px}
.arfx-hp-scene{display:grid;place-items:center;perspective:1600px;perspective-origin:50% 45%;min-width:0}
.arfx-hp-scale,.arfx-hp-tilt,.arfx-hp-slide{width:500px;height:340px;transform-style:preserve-3d}
.arfx-hp-scale{transform:scale(1)}
.arfx-hp-tilt{transform:rotateX(var(--hp-tilt-x,0deg)) rotateY(var(--hp-tilt-y,0deg));transition:transform .18s ease-out}
.arfx-hp-duo{width:500px;height:340px;position:relative;transform-style:preserve-3d;transform:rotateX(14deg) rotateY(-16deg) rotateZ(2deg);filter:drop-shadow(0 46px 40px var(--hp-shadow))}
.arfx-hp-half{position:absolute;top:0;width:250px;height:340px;transform-style:preserve-3d}
.arfx-hp-left{left:0}.arfx-hp-right{left:250px;transform-origin:left center}
.arfx-hp-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:6px;background:linear-gradient(145deg,var(--hp-edge),var(--hp-shell) 30%,var(--hp-shell2))}
.arfx-hp-left .arfx-hp-face{border-radius:30px 4px 4px 30px;padding-right:0}
.arfx-hp-right .arfx-hp-in{border-radius:4px 30px 30px 4px;padding-left:0}
.arfx-hp-right .arfx-hp-out{transform:rotateY(180deg);border-radius:30px 4px 4px 30px;padding:6px}
.arfx-hp-screen{width:100%;height:100%;background:var(--hp-screen);overflow:hidden;position:relative}
.arfx-hp-left .arfx-hp-screen{border-radius:25px 0 0 25px;border-right:1px solid var(--hp-line)}
.arfx-hp-in .arfx-hp-screen{border-radius:0 25px 25px 0}
.arfx-hp-out .arfx-hp-screen{border-radius:25px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;background:radial-gradient(120% 90% at 30% 20%,#2a2a2e,#0b0b0c);color:#fff}
.arfx-hp-out img{object-fit:contain;max-width:70%;height:auto}.arfx-hp-out time{font-size:12px;opacity:.6}
.arfx-hp-screen:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.2),rgba(255,255,255,0) 40%);pointer-events:none}
.arfx-hp-inner,.arfx-hp-inner picture{display:block;width:100%;height:100%;transform-origin:center}
.arfx-hp-inner img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.arfx-hp-inner img[hidden]{display:none}
.arfx-hp-crease{position:absolute;left:246px;top:6px;width:8px;height:328px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.18),transparent);pointer-events:none;transform:translateZ(1px)}
@keyframes arfx-hp-body{0%{opacity:0;transform:translateY(90px) rotateX(4deg) rotateY(0) scale(.86)}19%{opacity:1;transform:translateY(0) rotateX(6deg) rotateY(-4deg) scale(.9)}100%{opacity:1;transform:rotateX(14deg) rotateY(-16deg) rotateZ(2deg)}}
@keyframes arfx-hp-open{0%,19%{transform:rotateY(-180deg)}88%{transform:rotateY(3deg)}100%{transform:rotateY(0)}}
@keyframes arfx-hp-focus{0%,30%{filter:blur(14px);opacity:0;transform:scale(1.08)}85%,100%{filter:blur(0);opacity:1;transform:scale(1)}}
@keyframes arfx-hp-shift{0%,19%{transform:translateX(125px)}100%{transform:translateX(0)}}
@keyframes arfx-hp-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.arfx-hp[data-hero-phone-playing] .arfx-hp-duo{animation:arfx-hp-body 1300ms cubic-bezier(.2,.8,.2,1) both}
.arfx-hp[data-hero-phone-playing] .arfx-hp-right{animation:arfx-hp-open 1300ms cubic-bezier(.3,.1,.15,1) both}
.arfx-hp[data-hero-phone-playing] .arfx-hp-inner{animation:arfx-hp-focus 1300ms ease-out both}
.arfx-hp[data-hero-phone-playing] .arfx-hp-slide{animation:arfx-hp-shift 1300ms cubic-bezier(.2,.8,.2,1) both}
.arfx-hp[data-hero-phone-playing] .arfx-hp-copy>*{animation:arfx-hp-up 500ms cubic-bezier(.2,.8,.2,1) both}
.arfx-hp[data-hero-phone-playing] .arfx-hp-copy>*:nth-child(2){animation-delay:60ms}.arfx-hp[data-hero-phone-playing] .arfx-hp-copy>*:nth-child(3){animation-delay:120ms}
@media(max-width:900px){.arfx-hp{grid-template-columns:1fr;min-height:0}.arfx-hp-copy{padding:28px;gap:20px}.arfx-hp-copy h1{font-size:36px;line-height:1.1}.arfx-hp-scene{height:300px}.arfx-hp-scale{transform:scale(.62)}.arfx-hp-actions a{padding:0 22px}.arfx-hp-tilt{transform:none!important}}
@media(prefers-reduced-motion:reduce){.arfx-hp[data-hero-phone-playing] .arfx-hp-duo,.arfx-hp[data-hero-phone-playing] .arfx-hp-right,.arfx-hp[data-hero-phone-playing] .arfx-hp-inner,.arfx-hp[data-hero-phone-playing] .arfx-hp-slide,.arfx-hp[data-hero-phone-playing] .arfx-hp-copy>*{animation:none}.arfx-hp-tilt{transform:none!important;transition:none}}

/* Approved sample display UI; static illustration, never a quote or order form. */
.arfx-hp{--hp-screen2:#F5F5F7;--hp-ink:#111;--hp-up:#0a8f4e;--hp-stroke:#6AA600;--hp-fill:rgba(184,255,61,.35)}
html[data-bigbit-theme="dark"] .arfx-hp,.arfx-hp[data-hero-phone-theme="dark"]{--hp-screen2:#1C1C1E;--hp-ink:#F2F2F2;--hp-up:#B8FF3D;--hp-stroke:#B8FF3D;--hp-fill:rgba(184,255,61,.16)}
.arfx-hp-in .arfx-hp-screen,.arfx-hp-left .arfx-hp-screen{padding:20px 16px 16px;color:var(--hp-ink)}
.arfx-hp-inner{display:flex;flex-direction:column;gap:10px;min-height:0}
.arfx-hp-inner.arfx-hp-list{gap:7px}
.arfx-hp-symbol{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px;flex:none;line-height:22px;white-space:nowrap}
.arfx-hp-gold-dot{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#F5C400,#B8860B);flex:none}
.arfx-hp-demo{margin-left:auto;font-size:10px;font-weight:500;opacity:.65}
.arfx-hp-price{font-size:28px;font-weight:600;letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1.1;flex:none}
.arfx-hp-change{font-size:11px;line-height:1.4;color:var(--hp-up);font-weight:600;flex:none}
.arfx-hp-chart{flex:1;min-height:0;border-radius:14px;background:var(--hp-screen2);position:relative;overflow:hidden}
.arfx-hp-chart svg{position:absolute;inset:0;width:100%;height:100%}
.arfx-hp-trade-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:none}
.arfx-hp-trade{height:34px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:600}
.arfx-hp-buy{background:#B8FF3D;color:#111}.arfx-hp-sell{background:var(--hp-screen2);color:var(--hp-ink)}
.arfx-hp-quote-row{height:38px;border-radius:12px;background:var(--hp-screen2);display:flex;align-items:center;gap:8px;padding:0 10px;font-size:12px;font-weight:500;flex:none;line-height:1;white-space:nowrap}
.arfx-hp-quote-row b{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600}
.arfx-hp-quote-row i{width:18px;height:18px;border-radius:50%;flex:none}