/* Oona iPhone SIM — the one device frame used everywhere (quiz SUPP + B50, site home, plan reveal).
   Tokens live on .sim; variants only change tokens. Markup:
   <div class="sim [sim--full|sim--crop] [sim--light]"><div class="sim-isl"></div><span class="sim-sb">9:41</span><span class="sim-sbr">…</span><div class="sim-scr">…</div>[<div class="sim-badge">…</div>]</div>
   Wrap in <div class="sim-tile"> for the grey gradient ground that crops the device at its foot. */
.sim{--sim-w:310px;--sim-bezel:7px;--sim-bezel-c:#1B1E22;--sim-r:34px;--sim-scr-r:27px;--sim-scr-bg:#F7F8F8;--sim-fg:#1B1E22;--sim-shadow:0 18px 40px rgba(6,79,110,.16);--sim-pad-top:40px;--sim-pad-x:8px;--sim-fade:64px;--sim-fade-c:#F4F5F3;
  position:relative;width:var(--sim-w);flex:none;margin:0 auto;box-sizing:border-box;border:var(--sim-bezel) solid var(--sim-bezel-c);background:var(--sim-bezel-c);box-shadow:var(--sim-shadow);overflow:hidden;color:var(--sim-fg)}
.sim--crop{border-bottom:0;border-radius:var(--sim-r) var(--sim-r) 0 0}
.sim--crop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--sim-fade);background:linear-gradient(180deg,rgba(244,245,243,0),var(--sim-fade-c) 85%);pointer-events:none;z-index:4}
.sim--full{border-radius:var(--sim-r)}
.sim--full .sim-scr{bottom:0;border-radius:calc(var(--sim-r) - var(--sim-bezel))}
.sim-scr{position:absolute;inset:0;background:var(--sim-scr-bg);border-radius:var(--sim-scr-r) var(--sim-scr-r) 0 0;overflow:hidden;padding:var(--sim-pad-top) var(--sim-pad-x) 0;box-sizing:border-box}
.sim-isl{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:34%;height:18px;border-radius:10px;background:var(--sim-bezel-c);z-index:3}
.sim-sb{position:absolute;top:10px;left:16px;z-index:3;font:600 11px/1 var(--sans,system-ui);color:var(--sim-fg)}
.sim-sbr{position:absolute;top:9px;right:16px;z-index:3;display:inline-flex;align-items:center;gap:5px;height:12px;color:var(--sim-fg)}.sim-sbr svg{display:block}
.sim-home{display:none}
.sim-badge{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:5;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:17px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap;box-shadow:0 6px 18px rgba(6,79,110,.12)}
.sim-tile{position:relative;border-radius:20px;background:linear-gradient(180deg,#E6E8E6 0%,#F4F5F3 100%);padding:22px 16px 0;overflow:hidden;display:flex;justify-content:center}
/* shield the SIM from page-level utility classes */
.sim .sim-isl,.sim .sim-sb,.sim .sim-sbr{margin:0!important;padding:0!important;width:auto!important}.sim .sim-isl{width:34%!important}

/* LOCKED GEOMETRY (owner, 2026-10-02): one device, every surface, every variant. Pages may not override size, bezel, radius or screen insets.
   iPhone proportions 393×852 scaled to 310 wide. Crop instances show the top of this same device; the container does the cropping, never the device. */
:root{--sim-crop-h-lock:486px;--sim-w-lock:310px;--sim-h-lock:672px;--sim-bezel-lock:7px;--sim-r-lock:34px;--sim-scr-r-lock:27px;--sim-pad-top-lock:40px;--sim-pad-x-lock:8px}
.sim,.sim.sim--full,.sim.sim--crop{width:var(--sim-w-lock)!important;max-width:none!important;height:var(--sim-h-lock)!important;aspect-ratio:auto!important;border-width:var(--sim-bezel-lock)!important;border-radius:var(--sim-r-lock)!important;
  --sim-w:var(--sim-w-lock)!important;--sim-bezel:var(--sim-bezel-lock)!important;--sim-r:var(--sim-r-lock)!important;--sim-scr-r:var(--sim-scr-r-lock)!important;--sim-pad-top:var(--sim-pad-top-lock)!important;--sim-pad-x:var(--sim-pad-x-lock)!important}
.sim.sim--crop{border-bottom-width:0!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}
.sim .sim-scr{padding:var(--sim-pad-top-lock) var(--sim-pad-x-lock) 0!important;border-radius:var(--sim-scr-r-lock) var(--sim-scr-r-lock) 0 0!important}
.sim.sim--full .sim-scr{border-radius:calc(var(--sim-r-lock) - var(--sim-bezel-lock))!important}
/* crop fade sits at the crop line (486px), not at the device foot */
.sim.sim--crop::after{top:calc(var(--sim-crop-h-lock) - var(--sim-fade));bottom:auto;height:var(--sim-fade)}
/* the screen always fills the device inside the bezel, whatever the page set (no chin) */
.sim>.sim-scr{position:absolute!important;inset:0!important;height:auto!important;aspect-ratio:auto!important;margin:0!important}
/* SIM-GRADIENT (Ben, 2026-10-29): every app screen takes the home proof section's live gradient (.plv-ev-sec::before:
   165deg --pale #E6E7EC, --tint #ECECF0 at 45%, --card #FFFFFF), in place of the flat grey. The DNA phone's inner layer and
   its bottom fade, and the supplements phone's white panel, sat over the screen; they take the same ground. */
html body .sim .sim-scr,html body .sim .ip-inner{background:linear-gradient(165deg,#E6E7EC 0%,#ECECF0 45%,#FFFFFF 100%)}
html body .sim .ip-inner::after{background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 70%)}
html body .sim .sup-card{background:transparent}