/* App screen mockups on the home page, lifted from the app design boards.
   Delete this file and the three .frame blocks when real screenshots replace them. */
.scale { font-family: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif; }
.oh-n { font-variant-numeric: tabular-nums; }
.oh-sec { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.oh-lt { background: oklch(0.935 0.035 262); }
.oh-rt { background: oklch(0.955 0.03 262); }
.oh-li { background: oklch(0.47 0.16 262); }
.oh-ri { background: oklch(0.66 0.11 262); }
.oh-dw { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.oh-dl { font-size: 11px; color: oklch(0.50 0.012 260); }
.oh-dc { position: relative; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; isolation: isolate; background: oklch(0.955 0.004 250); }
.oh-dc i { position: absolute; display: block; }
.oh-tl { left: 0; top: 0; right: 0; bottom: 0; mix-blend-mode: multiply; }
.oh-sq { left: 14px; top: 14px; width: 16px; height: 16px; border-radius: 4px; }
.oh-ci { left: 14px; top: 14px; width: 16px; height: 16px; border-radius: 50%; }
.oh-b.oh-sq { left: 9px; top: 9px; width: 18px; height: 18px; }
.oh-b.oh-ci { left: 17px; top: 17px; width: 18px; height: 18px; }
.oh-mx { mix-blend-mode: multiply; }
.oh-wl { position: relative; width: 42px; height: 42px; border-radius: 12px; overflow: hidden; isolation: isolate; flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 1px; }
.oh-wl svg { position: relative; z-index: 1; }
.oh-lg { display: flex; align-items: center; gap: 6px; font-size: 12px; color: oklch(0.45 0.012 260); }
.oh-lg i { display: block; width: 10px; height: 10px; }
.op-n { font-variant-numeric: tabular-nums; }
.op-sec { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.op-lt { background: oklch(0.935 0.035 262); }
.op-rt { background: oklch(0.955 0.03 262); }
.op-li { background: oklch(0.47 0.16 262); }
.op-ri { background: oklch(0.66 0.11 262); }
.op-ltx { color: inherit; }
.op-rtx { color: inherit; }
.op-card { background: oklch(0.968 0.004 250); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; }
.op-tile { display: flex; flex-direction: column; gap: 3px; padding: 12px 13px; border-radius: 16px; background: oklch(0.968 0.004 250); }
.op-tl { font-size: 11.5px; color: oklch(0.48 0.012 260); display: flex; align-items: center; gap: 6px; }
.op-tv { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.op-chip { align-self: flex-start; margin-top: 5px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 8px; background: #CBF4D5; color: oklch(0.42 0.12 152); }
.op-seg { display: flex; align-items: center; justify-content: center; min-height: 36px; border-radius: 12px; font-size: 12.5px; font-weight: 600; color: oklch(0.48 0.012 260); }
.op-hd { font-size: 11px; font-weight: 600; letter-spacing: 0.045em; text-transform: uppercase; color: oklch(0.55 0.012 260); text-align: center; }
.op-hm { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.op-hc { position: relative; height: 30px; border-radius: 8px; overflow: hidden; isolation: isolate; background: oklch(0.955 0.004 250); }
.op-hc i { position: absolute; display: block; }
.op-hc .op-t { left: 0; top: 0; right: 0; bottom: 0; mix-blend-mode: multiply; }
.op-hc .op-s { left: 50%; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 3px; }
.op-hc .op-c { left: 50%; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; }
.op-hc .op-bs { margin: -10px 0 0 -10px; width: 15px; height: 15px; mix-blend-mode: multiply; }
.op-hc .op-bc { margin: -3.5px 0 0 -3.5px; width: 15px; height: 15px; mix-blend-mode: multiply; }
.op-lg { display: flex; align-items: center; gap: 6px; font-size: 12px; color: oklch(0.45 0.012 260); }
.op-lg i { display: block; width: 10px; height: 10px; }
.op-bars { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; height: 110px; padding: 0 4px; border-bottom: 1px solid oklch(0.93 0.004 250); }
.op-bars span { flex: 1; border-radius: 6px 6px 0 0; }
.op-bl { display: flex; justify-content: space-between; gap: 10px; padding: 8px 4px 0; font-size: 11px; color: oklch(0.50 0.012 260); }
.op-bl span { flex: 1; text-align: center; }
.od-n { font-variant-numeric: tabular-nums; }
.od-sec { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.od-lt { background: oklch(0.935 0.035 262); }
.od-rt { background: oklch(0.955 0.03 262); }
.od-li { background: oklch(0.47 0.16 262); }
.od-ri { background: oklch(0.66 0.11 262); }
.od-ltx { color: inherit; }
.od-rtx { color: inherit; }
.od-card { background: oklch(0.968 0.004 250); border-radius: 20px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.od-tile { display: flex; flex-direction: column; gap: 3px; padding: 12px 13px; border-radius: 16px; background: oklch(0.968 0.004 250); }
.od-tl { font-size: 11.5px; color: oklch(0.48 0.012 260); }
.od-tv { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.od-chip { align-self: flex-start; margin-top: 5px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 8px; }
.od-gain { background: #CBF4D5; color: oklch(0.42 0.12 152); }
.od-flat { background: rgba(255,255,255,0.72); color: oklch(0.40 0.012 260); }
.od-gm { position: relative; width: 56px; height: 56px; border-radius: 16px; overflow: hidden; isolation: isolate; flex-shrink: 0; }
.od-gm i { position: absolute; display: block; }
.od-gm .od-t { left: 0; top: 0; right: 0; bottom: 0; mix-blend-mode: multiply; }
.od-gm .od-bs { left: 13px; top: 13px; width: 26px; height: 26px; border-radius: 6px; mix-blend-mode: multiply; }
.od-gm .od-bc { left: 22px; top: 22px; width: 26px; height: 26px; border-radius: 50%; mix-blend-mode: multiply; }
.od-well { position: relative; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.od-row { display: flex; align-items: center; gap: 11px; min-height: 60px; padding: 8px 12px; border-radius: 12px; background: #ffffff; }
.od-lg { display: flex; align-items: center; gap: 6px; font-size: 12px; color: oklch(0.45 0.012 260); }
.od-lg i { display: block; width: 9px; height: 9px; }