/* Keep native scrolling within the phone without a bright browser gutter. */
html{color-scheme:dark;scrollbar-width:none}
html::-webkit-scrollbar{display:none}

/* The angled hero is already composited through a perspective transform and mask.
   Keep its grain static and avoid live backdrop sampling beneath the dot sweep. */
html[data-website-example="hero"] #grain{animation:none}
html[data-website-example="hero"] body.portal-board #app.concept-dashboard .tile,
html[data-website-example="hero"] body.portal-board #app.concept-dashboard .dashboard-nav::before{backdrop-filter:none;-webkit-backdrop-filter:none}

/* Give the top-left T breathing room inside the angled hero phone only. */
html[data-website-example="hero"] body.portal-board[data-portal="med-spa"] #app.concept-dashboard .dashboard-header .dashboard-hero{transform:translate(6px,0)}

/* Antialias the fine rules independently inside the perspective hero phone.
   No filter is applied to the phone or its text. */
html[data-website-example="hero"] body.portal-board #app.concept-dashboard .dashboard-tab::after {
  transform: translateZ(0);
  filter: blur(.25px);
}
html[data-website-example="hero"] body.portal-board #app.concept-dashboard .script-preview-card {
  box-shadow: 0 24px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035), 0 0 .45px rgba(185,135,91,.55), inset 0 0 .45px rgba(185,135,91,.55);
}

/* Straight card edges inside the tilted hero phone (Claude, 24 September 2026).
   Chrome does not anti-alias clip-path edges under a 3D transform, so the card's
   1px border, which sits on the clip edge, rendered jagged while the inner rules
   (plain borders) stayed straight. Cut the corner with a mask instead: masks are
   anti-aliased. Same 26px notch (26 / sqrt 2 = 18.38px from the corner). */
html[data-website-example="hero"] body.portal-board #app.concept-dashboard .tile{
  clip-path:none;
  -webkit-mask:linear-gradient(225deg,transparent 18.1px,#000 18.7px);
  mask:linear-gradient(225deg,transparent 18.1px,#000 18.7px);
}

/* Phone status bar shown inside the website's drawn phones (website-config.js). Sized for the 390px portal viewport. */
.vz-statusbar{display:none}
html.vz-in-phone .vz-statusbar{display:flex;position:fixed;left:0;right:0;top:0;height:46px;z-index:60;align-items:center;justify-content:space-between;padding:4px 28px 0 36px;pointer-events:none;
  font:600 15.5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;letter-spacing:-.01em;color:#fff;background:linear-gradient(#000 62%,rgba(0,0,0,0))}
html.vz-in-phone .vz-island{position:absolute;left:50%;top:10px;width:108px;height:31px;margin-left:-54px;border-radius:17px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.05)}
html.vz-in-phone .vz-island::after{content:"";position:absolute;right:12px;top:10px;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#23355a,#05070c 70%)}
html.vz-in-phone .vz-icons{display:flex;align-items:center;gap:6px}
html.vz-in-phone .vz-sig{display:flex;align-items:flex-end;gap:1.6px;height:11px}
html.vz-in-phone .vz-sig b{display:block;width:3px;border-radius:1px;background:#fff}
html.vz-in-phone .vz-sig b:nth-child(1){height:4px}html.vz-in-phone .vz-sig b:nth-child(2){height:6px}html.vz-in-phone .vz-sig b:nth-child(3){height:8.5px}html.vz-in-phone .vz-sig b:nth-child(4){height:11px}
html.vz-in-phone .vz-bat{position:relative;width:24px;height:12px;border-radius:3.5px;border:1.3px solid rgba(255,255,255,.55);background:linear-gradient(#fff,#fff) 1.6px 50%/16.5px 7px no-repeat}
html.vz-in-phone .vz-bat::after{content:"";position:absolute;right:-3.6px;top:3.2px;width:1.8px;height:4px;border-radius:0 1px 1px 0;background:rgba(255,255,255,.55)}
/* Room for the bar: push the portal content down by 26px. */
html.vz-in-phone body.portal-board[data-portal="med-spa"] #app.concept-dashboard{padding-top:53px}