/* UPF Tracker launch site - page styles. Design tokens follow the app's Honest Lens palette. */
html{color-scheme:light dark}
body{margin:0;font-optical-sizing:auto}
.upf{
--bg-canvas:#FAF9F5;--bg-surface:#FFFFFF;--bg-recess:#F2F0E9;--bg-inset:#E9E6DC;
--text-ink:#252729;--text-soft:#686963;--rule:#E4E0D5;--rule-strong:#D3CEC0;
--accent:#FFDA00;--accent-ink:#252729;--accent-soft:#FFF3B3;
--nova-1:#327B52;--nova-2:#738B35;--nova-3:#BB830E;--nova-4:#AA3B31;
--nova-4-soft:#F0D6D3;--ns-e:#B43A2E;
--nav-bg:rgba(250,249,245,0.72);
--bezel:#1B1B1D;--bezel-edge:#3A3A3D;--bezel-hi:#2C2C2F;
--shadow-device:0 2px 4px rgba(15,17,16,0.08),0 30px 60px rgba(15,17,16,0.16);
}
@media (prefers-color-scheme: dark){
.upf[data-theme="auto"]{
--bg-canvas:#141516;--bg-surface:#1D1F21;--bg-recess:#1D1F21;--bg-inset:#272A2D;
--text-ink:#F0EDE6;--text-soft:#B0ADA4;--rule:#2A2C30;--rule-strong:#3A3D42;
--accent:#FFDA00;--accent-ink:#252729;--accent-soft:#3D3400;
--nova-1:#7BC295;--nova-2:#B8CE6E;--nova-3:#D4A744;--nova-4:#D9695F;
--nova-4-soft:#3A1F1D;--ns-e:#D9695F;
--nav-bg:rgba(20,21,22,0.72);
--bezel:#2A2C30;--bezel-edge:#4A4D52;--bezel-hi:#3A3D42;
--shadow-device:0 2px 4px rgba(0,0,0,0.4),0 30px 60px rgba(0,0,0,0.6);
}
}
.upf[data-theme="dark"]{
--bg-canvas:#141516;--bg-surface:#1D1F21;--bg-recess:#1D1F21;--bg-inset:#272A2D;
--text-ink:#F0EDE6;--text-soft:#B0ADA4;--rule:#2A2C30;--rule-strong:#3A3D42;
--accent:#FFDA00;--accent-ink:#252729;--accent-soft:#3D3400;
--nova-1:#7BC295;--nova-2:#B8CE6E;--nova-3:#D4A744;--nova-4:#D9695F;
--nova-4-soft:#3A1F1D;--ns-e:#D9695F;
--nav-bg:rgba(20,21,22,0.72);
--bezel:#2A2C30;--bezel-edge:#4A4D52;--bezel-hi:#3A3D42;
--shadow-device:0 2px 4px rgba(0,0,0,0.4),0 30px 60px rgba(0,0,0,0.6);
}
.upf *{box-sizing:border-box}
.upf a{color:var(--text-ink)}
.upf a:hover{text-decoration-color:var(--accent);text-decoration-thickness:2px}
.upf input::placeholder{color:var(--text-soft);opacity:1}
/* Keep the field on-brand when the browser autofills it. */
.upf input:-webkit-autofill,.upf input:-webkit-autofill:hover,.upf input:-webkit-autofill:focus{-webkit-text-fill-color:var(--text-ink);-webkit-box-shadow:0 0 0 1000px var(--bg-surface) inset;box-shadow:0 0 0 1000px var(--bg-surface) inset;caret-color:var(--text-ink)}
.upf input:autofill{background-color:var(--bg-surface);color:var(--text-ink)}
.upf input:focus-visible,.upf button:focus-visible,.upf a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.upf .btn{transition:transform 100ms ease-out}
.upf .btn:active{transform:scale(0.97)}
/* Nav: translucent material; the edge only appears once content scrolls beneath it. */
.upf .nav{position:sticky;top:0;z-index:10;background:var(--nav-bg);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:0 1px 0 transparent,0 8px 24px rgba(37,39,41,0);transition:box-shadow .3s ease}
.upf .nav.scrolled{box-shadow:0 1px 0 var(--rule),0 8px 24px rgba(37,39,41,0.06)}
.upf .nav a{font-weight:500}
.upf .nav-sentinel{height:1px;margin-bottom:-1px}
.upf .theme-toggle{width:44px;height:44px;margin:0 0 0 -8px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text-ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.upf .theme-toggle:hover{background:var(--bg-recess)}
.upf .theme-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.upf .theme-toggle .ico-sun{display:none}
.upf[data-theme="dark"] .theme-toggle .ico-sun{display:block}
.upf[data-theme="dark"] .theme-toggle .ico-moon{display:none}
/* Hero demo: two screens, same path in and out (result rises from the sheet, returns to it). */
.upf .demo-stage{position:relative;flex:1;min-height:0;overflow:hidden}
.upf .demo-scan{position:absolute;inset:0;background:#0A0B0D;color:#F0EDE6;display:flex;flex-direction:column}
.upf .vf{position:absolute;width:28px;height:28px}
.upf .demo-sheet{position:absolute;left:12px;right:12px;bottom:0;background:var(--bg-canvas);color:var(--text-ink);border-radius:22px 22px 0 0;padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 -8px 30px rgba(0,0,0,0.4)}
.upf .demo-result{position:absolute;inset:0;background:var(--bg-canvas);transform:translateY(100%);transition:transform .55s cubic-bezier(.32,.72,0,1),opacity .25s ease;will-change:transform}
.upf .demo[data-screen="result"] .demo-result{transform:none}
.upf .demo[data-screen="scan"] .demo-result{opacity:0;pointer-events:none}
.upf .demo[data-screen="result"] .demo-scan{pointer-events:none}
.upf .demo-sheet,.upf .demo-scan>div:first-child{transition:transform .55s cubic-bezier(.32,.72,0,1)}
.upf .demo[data-screen="result"] .demo-sheet{transform:translateY(16px)}
.upf .demo[data-screen="result"] .demo-scan>div:first-child{transform:scale(.96)}
/* Confirmation arrives as a material, not a fade. */
@keyframes upf-materialize{from{opacity:0;transform:scale(.96);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.upf .materialize:not([hidden]){animation:upf-materialize .45s cubic-bezier(.32,.72,0,1) both}
/* Scroll-driven reveals: scrubbed by the scroll position, so always interruptible. */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
.upf .reveal{animation:upf-rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
}
}
@keyframes upf-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
/* iPhone frame */
.upf .ph{position:relative;width:300px;max-width:100%;flex:0 0 auto;padding:10px;border-radius:54px;background:var(--bezel);box-shadow:0 0 0 1px var(--bezel-edge),inset 0 0 0 2px var(--bezel-hi),var(--shadow-device)}
.upf .ph-key{position:absolute;width:3px;background:var(--bezel-edge)}
.upf .ph-key.l1{left:-3px;top:104px;height:24px;border-radius:2px 0 0 2px}
.upf .ph-key.l2{left:-3px;top:150px;height:46px;border-radius:2px 0 0 2px}
.upf .ph-key.l3{left:-3px;top:206px;height:46px;border-radius:2px 0 0 2px}
.upf .ph-key.r1{right:-3px;top:176px;height:72px;border-radius:0 2px 2px 0}
.upf .ph-screen{position:relative;height:620px;border-radius:44px;overflow:hidden;background:var(--bg-canvas);color:var(--text-ink);display:flex;flex-direction:column;text-align:left}
.upf .ph-screen.cam{background:#0A0B0D;color:#F0EDE6}
.upf .ph-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:88px;height:26px;border-radius:999px;background:#000;z-index:2}
.upf .ph-status{height:46px;flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 28px 0 32px;font-size:13px;font-weight:600}
.upf .ph-batt{width:22px;height:11px;border:1px solid currentColor;border-radius:3px;padding:1px;opacity:.9}
.upf .ph-batt i{display:block;height:100%;width:80%;background:currentColor;border-radius:1px}
.upf .ph-body{flex:1;min-height:0;padding:10px 20px 0;display:flex;flex-direction:column;gap:14px}
.upf .ph-tabs{flex:0 0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;padding:8px 8px 22px;border-top:1px solid var(--rule);font-size:9px;font-weight:500;text-align:center;color:var(--text-soft)}
.upf .ph-tabs span{display:flex;flex-direction:column;align-items:center;gap:3px}
.upf .ph-tabs svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.upf .ph-tabs .scan{width:48px;height:48px;margin:-28px auto 0;border-radius:50%;background:var(--accent);color:var(--accent-ink);justify-content:center;box-shadow:0 6px 16px rgba(255,218,0,0.35)}
.upf .ph-tabs .scan svg{width:22px;height:22px;stroke-width:1.8}
.upf .cam .ph-tabs{border-top-color:#2A2C30;color:#B0ADA4}
.upf .chip{display:inline-flex;align-items:center;gap:5px;font-family:'Geist Mono',monospace;font-size:10px;white-space:nowrap}
.upf .chip i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.upf .ph-fade{position:absolute;left:0;right:0;bottom:0;height:72px;background:linear-gradient(to bottom,transparent,var(--bg-canvas));pointer-events:none}
.upf .ph-tabs .on{color:var(--text-ink)}
.upf .ph-home{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:108px;height:4px;border-radius:999px;background:currentColor;opacity:.85}
.upf .ph-label{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-soft)}
.upf .cam .ph-label{color:#B0ADA4}
.upf .barcode{height:64px;background:repeating-linear-gradient(90deg,#0F1110 0 3px,#fff 3px 5px,#0F1110 5px 6px,#fff 6px 10px,#0F1110 10px 14px,#fff 14px 16px)}
.upf .hl{font-style:italic;color:var(--accent-ink);background:var(--accent);padding:0 0.12em;margin:0 -0.02em;border-radius:0.08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.upf .logo-dark{display:none}
.upf[data-theme="dark"] .logo-light{display:none}
.upf[data-theme="dark"] .logo-dark{display:block}
@media (prefers-reduced-motion: no-preference){.upf{transition:background-color .3s ease,color .3s ease}}
@media (prefers-reduced-motion:reduce){.upf .btn{transition:none}.upf .btn:active{transform:none}.upf .demo-result,.upf .demo-sheet,.upf .demo-scan>div:first-child{transition:opacity .2s ease;transform:none !important}.upf .materialize:not([hidden]){animation:none}}
@media (prefers-reduced-transparency:reduce){.upf .nav{background:var(--bg-canvas);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-color-scheme: dark){
.upf[data-theme="auto"] .theme-toggle .ico-sun{display:block}
.upf[data-theme="auto"] .theme-toggle .ico-moon{display:none}
.upf[data-theme="auto"] .logo-light{display:none}
.upf[data-theme="auto"] .logo-dark{display:block}
}
.upf [hidden]{display:none !important}