/* Perspectiv Showroom
   Tokens, type scale, the outlined-italic display treatment and the
   light-section accent mix are lifted from the live site's assets/styles.css. */

:root {
  --bg:            #26252b;
  --bg-2:          #2d2c33;
  --card:          #2f2e36;
  --card-hover:    #36343d;
  --ink:           #ffffff;
  --muted:         rgba(255,255,255,0.55);
  --muted-2:       rgba(255,255,255,0.68);
  --line:          rgba(255,255,255,0.10);
  --line-strong:   rgba(255,255,255,0.18);
  --accent:        #C5BAA8;

  --light-bg:      #FBFAF9;
  --light-bg-2:    #F4F1ED;
  --light-ink:     #26252b;
  --light-ink-2:   #44403c;
  --light-muted:   #78716c;
  --light-line:    rgba(38,37,43,0.10);
  --light-line-2:  rgba(38,37,43,0.18);

  --max-w:  1480px;
  --sans:   'Helvetica Neue', Arial, sans-serif;
  --serif:  'Instrument Serif', Georgia, 'Times New Roman', serif;
  --ease:   cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: 0.96; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 4px; }
/* leaving for the Portal, as on the rest of the site (main.js) */
html.is-leaving body { opacity: 0; transition: opacity .34s ease; pointer-events: none; }

.em {
  -webkit-text-stroke: 1.4px var(--ink);
  color: transparent; font-style: italic; font-weight: 300; letter-spacing: -0.03em;
}
.eyebrow {
  font-size: 11px; letter-spacing: 4px; color: var(--accent);
  text-transform: uppercase; font-weight: 600;
}
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

/* ---------- alternating bands ---------- */
.band { background: var(--bg); color: var(--ink); }
.band-light {
  background: var(--light-bg); color: var(--light-ink);
  border-top: 1px solid var(--light-line); border-bottom: 1px solid var(--light-line);
}
.band-light .eyebrow { color: color-mix(in srgb, var(--accent) 60%, var(--light-ink-2)); }
.band-light .em      { -webkit-text-stroke: 1.4px var(--light-ink); }
.band-light .lead,
.band-light .sec-note { color: var(--light-muted); }

/* ---------- site nav + page header ----------
   Copied rule for rule from assets/styles.css (NAV, MOBILE HAMBURGER +
   DRAWER, PAGE HEADER and their 900px/600px overrides) so the showroom's top
   is the same as every other page. main.js drives the scroll hide/show and
   the phone drawer. If the site's nav or page head changes, change it here
   too. line-height is pinned because this page's body sets 1.6. */
nav.site-nav, .mobile-drawer, .page-head { line-height: normal; }
nav.site-nav {
  position: fixed; top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 26px 48px;
  z-index: 100;
  background: linear-gradient(180deg, rgba(20,18,24,0.55), transparent);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1),
              background 0.3s ease,
              backdrop-filter 0.3s ease;
}
nav.site-nav.nav-scrolled {
  background: rgba(20,18,24,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
nav.site-nav.nav-hidden { transform: translateY(-110%); }
.logo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  transition: opacity .2s;
}
.logo:hover { opacity: 0.75; }
.logo-img {
  display: block;
  height: 24px;
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.nav-links { display: flex; gap: 8px; justify-self: center; }
.nav-links a {
  position: relative;
  color: rgba(255,255,255,0.7); text-decoration: none; font-size: 12px;
  letter-spacing: 2.5px; text-transform: uppercase;
  padding: 10px 18px; border-radius: 30px;
  transition: all .25s ease;
}
.nav-links a:hover {
  color: var(--ink);
  background: rgba(255,255,255,0.08);
  transform: scale(1.06);
  letter-spacing: 3px;
}
.nav-links a.active { color: var(--bg); background: var(--ink); }

.nav-burger {
  display: none;
  background: none; border: 0; padding: 10px; cursor: pointer;
  position: relative;
  width: 44px; height: 44px;
  justify-self: end;
  z-index: 110;
}
.nav-burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  margin: 5px auto;
  border-radius: 2px;
  transition: transform .35s cubic-bezier(0.16,1,0.3,1), opacity .25s ease;
}
.nav-burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-active span:nth-child(2) { opacity: 0; }
.nav-burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-drawer {
  position: fixed; inset: 0;
  background: rgba(20, 18, 24, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 200;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  display: flex; align-items: center; justify-content: center;
  padding: 80px 32px 60px;
}
.mobile-drawer.is-open { opacity: 1; visibility: visible; }
.mobile-drawer-inner {
  width: 100%; max-width: 480px;
  display: flex; flex-direction: column; gap: 48px;
  text-align: left;
}
.mobile-drawer-links { display: flex; flex-direction: column; gap: 4px; }
.mobile-drawer-links a {
  display: block;
  padding: 18px 0;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 34px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none; text-transform: none;
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease, transform .5s cubic-bezier(0.16,1,0.3,1), color .2s ease;
  transition-delay: 0s;
}
.mobile-drawer.is-open .mobile-drawer-links a { opacity: 1; transform: translateY(0); }
.mobile-drawer.is-open .mobile-drawer-links a:nth-child(1) { transition-delay: 0.05s; }
.mobile-drawer.is-open .mobile-drawer-links a:nth-child(2) { transition-delay: 0.10s; }
.mobile-drawer.is-open .mobile-drawer-links a:nth-child(3) { transition-delay: 0.15s; }
.mobile-drawer.is-open .mobile-drawer-links a:nth-child(4) { transition-delay: 0.20s; }
.mobile-drawer-links a:hover,
.mobile-drawer-links a.active { color: var(--accent); }
.mobile-drawer-footer {
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease .3s, transform .5s cubic-bezier(0.16,1,0.3,1) .3s;
}
.mobile-drawer.is-open .mobile-drawer-footer { opacity: 1; transform: translateY(0); }
.mobile-drawer-footer a {
  font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--muted-2); text-decoration: none; font-weight: 600;
}

.page-head {
  padding: 180px 60px 90px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.page-head .eyebrow { margin-bottom: 24px; }
.page-head h1 {
  font-size: clamp(48px, 7vw, 104px);
  font-weight: 800; letter-spacing: -0.035em; line-height: 0.96;
  max-width: 1100px;
}
.page-head .lead {
  margin-top: 36px; max-width: 720px;
  font-size: clamp(16px, 1.2vw, 19px); line-height: 1.65;
  color: rgba(255,255,255,0.78);
}

@media (max-width: 900px) {
  .logo-img { height: 20px; }
  .nav-burger { display: block; }
  nav.site-nav {
    padding: 18px 24px;
    grid-template-columns: auto 1fr;
    background: rgba(38,37,43,0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .nav-spacer, .nav-links { display: none; }
  .page-head { padding: 130px 24px 60px; }
}
@media (max-width: 600px) {
  .page-head h1 { font-size: clamp(42px, 11vw, 72px); }
}

/* ---------- section headers ---------- */
.sec-head {
  padding: clamp(56px, 7vw, 96px) 0 clamp(30px, 3.6vw, 46px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.sec-head h2 { font-size: clamp(30px, 4vw, 56px); text-transform: uppercase; }
.sec-head .eyebrow { margin-bottom: 18px; }
.sec-note { max-width: 420px; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ---------- grid ---------- */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr));
  gap: clamp(40px, 5vw, 72px) clamp(28px, 3.4vw, 48px);
  padding-bottom: clamp(72px, 9vw, 128px);
}
.card {
  display: block; width: 100%; text-align: left;
  background: none;
}

/* Still covers, not live iframes. A scaled website on the grid stole the
   scroll, ran eight copies of Lenis at once, and looked like a stamp. */
.cover {
  position: relative;
  display: block;
  container-type: inline-size;
  margin-bottom: clamp(56px, 10vw, 80px);
}
.desk {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #1a191f;
  border: 1px solid var(--line-strong);
  box-shadow: 0 36px 80px -48px rgba(0,0,0,0.85);
  transition: transform .5s var(--ease), border-color .4s var(--ease);
}
.band-light .desk {
  background: #ece8e2;
  border-color: var(--light-line-2);
  box-shadow: 0 36px 80px -50px rgba(38,37,43,0.38);
}
.desk-bar {
  display: flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.band-light .desk-bar {
  background: rgba(38,37,43,.04);
  border-bottom-color: rgba(38,37,43,.08);
}
.desk-bar i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.18);
}
.desk-bar i:nth-child(1) { background: #ff5f57; }
.desk-bar i:nth-child(2) { background: #febc2e; }
.desk-bar i:nth-child(3) { background: #28c840; }
.card:hover .desk, .card:focus-visible .desk { transform: translateY(-4px); }
.cover-desk {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover; object-position: top center;
  background: var(--card);
}

/* Bezel, corners and notch scale off the phone's width (--pw, in cover
   container units) so the device keeps its proportions at any size. Fixed
   px here made the bezel read twice as thick once the card shrank on a phone. */
.phone {
  --pw: 22cqw;
  position: absolute; right: 5%; bottom: -16%;
  width: var(--pw); aspect-ratio: 390 / 844;
  padding: calc(var(--pw) * .028) calc(var(--pw) * .024) calc(var(--pw) * .032);
  border-radius: calc(var(--pw) * .09);
  background: #111014;
  border: 1px solid #2a2930;
  box-shadow:
    0 18px 40px -16px rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .5s var(--ease);
}
.phone::before {
  content: '';
  position: absolute; z-index: 2;
  top: calc(var(--pw) * .045); left: 50%; transform: translateX(-50%);
  width: 32%; height: calc(var(--pw) * .028); border-radius: 999px;
  background: #000;
}
.phone img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  border-radius: calc(var(--pw) * .066);
  background: #141318;
}
.card:hover .phone, .card:focus-visible .phone { transform: translateY(-10px); }

.card-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 16px; row-gap: 4px;
  padding: 8px 4px 0;
  align-items: baseline;
}
.card-logo {
  grid-column: 1; grid-row: 1;
  height: 22px; width: auto; max-width: 180px;
  object-fit: contain; display: block;
}
.card-name {
  grid-column: 1; grid-row: 1;
  font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.02em; font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.1;
}
.card-trade {
  grid-column: 1; grid-row: 2;
  font-size: 13px; color: var(--muted);
}
.band-light .card-trade { color: var(--light-muted); }
.tag {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: center;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase;
  font-weight: 600; color: var(--muted); white-space: nowrap;
}
.band-light .tag { color: var(--light-muted); }
.tag-live i { width: 6px; height: 6px; border-radius: 50%; background: #6ee7a8; display: block; }

@media (max-width: 620px) {
  .phone { --pw: 26cqw; bottom: -12%; }
}

@media (prefers-reduced-motion: reduce) {
  .card:hover .desk, .card:focus-visible .desk,
  .card:hover .phone, .card:focus-visible .phone { transform: none; }
}

/* ============================================================
   Viewer
   A dark bar to move between sites and screen sizes, the site's
   own pages as tabs above the frame, the live site given every
   pixel that is left, and the case notes in a rail on the right.
   ============================================================ */

.viewer {
  --bar-h: 64px;
  position: fixed; inset: 0; z-index: 150; display: none;
  flex-direction: column;
  overscroll-behavior: none;
  background:
    radial-gradient(120% 80% at 30% 0%, #ffffff 0%, rgba(255,255,255,0) 60%),
    var(--light-bg);
  color: var(--light-ink);
}
.viewer.open { display: flex; }
/* The house outlined italic, restated for the light surface. */
.viewer .em { -webkit-text-stroke: 1.2px var(--light-ink); }
.viewer svg {
  flex-shrink: 0; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- top bar ---------- */
.v-bar {
  position: relative; z-index: 8; flex-shrink: 0;
  height: var(--bar-h);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 16px;
  padding: 0 clamp(12px, 1.6vw, 20px);
  background: var(--bg); color: var(--ink);
  border-bottom: 1px solid rgba(0,0,0,.25);
}
.v-bar-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.v-bar-r { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

.v-back {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  height: 38px; padding: 0 15px 0 11px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 13px; font-weight: 600; color: var(--muted-2); white-space: nowrap;
  transition: color .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
}
.v-back:hover { color: #fff; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.3); }
.v-back:active { transform: scale(.97); }

/* Site switcher — which site you are on, and every other one a click away. */
.v-switch { position: relative; min-width: 0; }
.v-switch-btn {
  display: flex; align-items: center; gap: 11px;
  max-width: 100%; min-width: 0; height: 48px;
  padding: 0 12px 0 6px; border-radius: 12px; text-align: left;
  transition: background .22s var(--ease);
}
.v-switch-btn:hover { background: rgba(255,255,255,.06); }
.v-switch-btn[aria-expanded="true"] { background: rgba(255,255,255,.09); }
.v-switch-thumb {
  width: 48px; height: 30px; flex-shrink: 0; display: block;
  border-radius: 6px; object-fit: cover; object-position: top center;
  background: var(--card); box-shadow: 0 0 0 1px rgba(255,255,255,.14);
}
.v-switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v-switch-name, .v-switch-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-switch-name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; color: #fff; }
.v-switch-sub { font-size: 12px; line-height: 1.2; color: var(--muted); }
.v-chev { color: var(--muted); transition: transform .25s var(--ease); }
.v-switch-btn[aria-expanded="true"] .v-chev { transform: rotate(180deg); }

.v-sites {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 20;
  width: 400px; max-height: calc(100dvh - var(--bar-h) - 24px); overflow-y: auto;
  padding: 8px; border-radius: 16px;
  background: var(--bg-2); border: 1px solid var(--line-strong);
  box-shadow: 0 30px 70px -20px rgba(10,9,12,.7);
  animation: v-pop .2s var(--ease);
}
.v-sites[hidden] { display: none; }
@keyframes v-pop { from { opacity: 0; transform: translateY(-6px); } }
.v-sites-head {
  padding: 12px 10px 8px;
  font-size: 10.5px; letter-spacing: 2.6px; text-transform: uppercase;
  font-weight: 700; color: var(--accent);
}
.v-sites-head:not(:first-child) { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 16px; }
.v-sites button {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 8px 10px 8px 8px; border-radius: 11px;
  transition: background .18s var(--ease);
}
.v-sites button:hover,
.v-sites button:focus-visible { background: rgba(255,255,255,.06); outline: none; }
.v-sites button[aria-checked="true"] { background: rgba(255,255,255,.10); }
.v-sites img {
  width: 64px; height: 40px; display: block;
  border-radius: 6px; object-fit: cover; object-position: top center;
  background: var(--card); box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}
.v-sites-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v-sites-text b { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-sites-text span { font-size: 12px; color: var(--muted); }
.v-sites-meta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.v-sites-meta.is-live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #6ee7a8;
}
.v-sites button[aria-checked="true"] .v-sites-meta { color: var(--accent); }

.v-step { display: flex; gap: 4px; flex-shrink: 0; }
.v-step-btn {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--muted-2); border: 1px solid var(--line);
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.v-step-btn:hover { background: rgba(255,255,255,.08); color: #fff; border-color: var(--line-strong); }
.v-step-btn:active { transform: scale(.94); }

/* Screen size — one segmented control; the chosen size reads like the
   site nav's active link (white pill, charcoal text). */
.v-dev {
  display: flex; gap: 2px; padding: 3px;
  border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
}
.v-dev button {
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 15px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: var(--muted-2);
  transition: background .22s var(--ease), color .22s var(--ease);
}
.v-dev button:hover { color: #fff; background: rgba(255,255,255,.06); }
.v-dev button[aria-pressed="true"] { background: #fff; color: var(--bg); }
.v-dev b { font-weight: inherit; }

.v-cta {
  display: inline-flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 20px; border-radius: 40px;
  background: var(--ink); color: var(--bg);
  font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 700;
  white-space: nowrap;
  transition: background .2s ease, transform .18s var(--ease);
}
.v-cta:hover { background: rgba(255,255,255,0.88); }
.v-cta:active { transform: scale(.98); }

/* ---------- body ---------- */
.v-body { flex: 1; min-height: 0; display: flex; }

/* ---------- stage ---------- */
.v-stage {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.8vw, 26px) clamp(16px, 2vw, 26px);
  gap: clamp(10px, 1.1vw, 14px);
}

/* Page tabs + address — the browser's own furniture, above the frame. */
.v-tools {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-width: 0;
}
.v-tabs {
  position: relative; display: flex; gap: 2px;
  min-width: 0; max-width: 100%; padding: 4px;
  border-radius: 999px;
  background: var(--light-bg-2); border: 1px solid var(--light-line);
  overflow-x: auto; scrollbar-width: none;
  scroll-behavior: smooth;
}
.v-tabs::-webkit-scrollbar { display: none; }
.v-tabs.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.v-tabs.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
.v-tabs.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.v-tab {
  position: relative; z-index: 1; flex-shrink: 0;
  height: 32px; padding: 0 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--light-muted); white-space: nowrap;
  transition: color .22s var(--ease);
}
.v-tab:hover { color: var(--light-ink); }
.v-tab[aria-current="page"] { color: var(--light-ink); }
.v-tab:focus-visible { outline-offset: -2px; }
/* The white pill that slides to the page you are on. */
.v-tabs-ink {
  position: absolute; z-index: 0; top: 4px; left: 0;
  height: 32px; border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(38,37,43,.12), 0 0 0 1px rgba(38,37,43,.06), 0 6px 14px -8px rgba(38,37,43,.3);
  transition: transform .4s var(--ease), width .4s var(--ease), opacity .2s ease;
  pointer-events: none;
}
.v-tabs.no-anim .v-tabs-ink { transition: none; }
.v-tabs-one {
  display: flex; align-items: center; height: 32px; padding: 0 14px 0 4px;
  font-size: 12px; color: var(--light-muted); white-space: nowrap;
}

.v-url {
  display: flex; align-items: center; gap: 9px;
  min-width: 0; max-width: 440px; height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--light-line);
  background: rgba(255,255,255,.6);
  color: var(--light-muted); font-size: 12.5px;
  transition: border-color .22s var(--ease), background .22s var(--ease);
}
.v-url:hover { border-color: var(--light-line-2); background: #fff; }
.v-url-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-url-path { color: var(--light-ink); }
.v-url-out { transition: transform .22s var(--ease); }
.v-url:hover .v-url-out { transform: translate(1px, -1px); color: var(--light-ink); }

.v-shell { flex: 1; min-height: 0; position: relative; overflow: hidden; overscroll-behavior: contain; }

/* Absolutely centred so a device taller than the stage scales around the
   stage centre instead of growing the layout and sliding out of view. */
.v-frame {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: var(--light-bg-2) center top / cover no-repeat;
  border: 1px solid var(--light-line-2);
  transform-origin: center center;
  box-shadow: 0 30px 70px -34px rgba(38,37,43,.55), 0 2px 8px -2px rgba(38,37,43,.10);
}
.v-frame[data-dev="1440"],
.v-frame[data-dev="bare"] { border-radius: 14px; }
.v-frame[data-dev="834"] {
  border-radius: 22px;
  border-width: 10px;
  border-color: #1c1b22;
}
.v-frame[data-dev="390"] {
  border-radius: 36px;
  border-width: 10px;
  border-color: #1c1b22;
  box-shadow:
    0 40px 80px -30px rgba(38,37,43,.55),
    inset 0 0 0 1px rgba(255,255,255,.08);
}
.v-frame iframe {
  display: block; border: 0;
  background: var(--light-bg);
  transform-origin: 0 0;
  opacity: 0; transition: opacity .45s var(--ease);
}
.v-frame iframe.ready { opacity: 1; }

/* Loading: a thin bar runs across the top of the frame. */
.v-load {
  position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 2px;
  overflow: hidden; opacity: 0; transition: opacity .3s ease;
  pointer-events: none;
}
.v-load::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: var(--accent);
  animation: v-load 1.1s var(--ease) infinite;
}
.v-frame.is-loading .v-load { opacity: 1; }
@keyframes v-load { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ---------- rail ---------- */
.v-rail {
  flex-shrink: 0; width: clamp(290px, 23vw, 360px);
  border-left: 1px solid var(--light-line);
  padding: clamp(24px, 2.6vw, 36px) clamp(22px, 2.2vw, 30px);
  display: flex; flex-direction: column; gap: clamp(22px, 2.2vw, 30px);
  overflow-y: auto;
}
.v-id { display: flex; flex-direction: column; gap: 14px; }
.v-display {
  margin: 0; font-family: var(--sans); font-weight: 800;
  font-size: clamp(24px, 2vw, 32px); letter-spacing: -0.035em; line-height: 0.94;
  text-transform: uppercase; color: var(--light-ink);
}
.v-display span { display: block; }
.v-display span:empty { display: none; }
.v-line {
  font-size: 14px; line-height: 1.55; color: var(--light-muted);
  max-width: 34ch; text-wrap: pretty;
}

/* Three claims, ruled apart so each one is read on its own. */
.v-sell { margin: 0; display: flex; flex-direction: column; }
.v-sell > div {
  display: flex; flex-direction: column; gap: 5px;
  padding: 14px 0; border-top: 1px solid var(--light-line);
}
.v-sell > div:last-child { border-bottom: 1px solid var(--light-line); }
.v-sell dt {
  font-size: 9.5px; letter-spacing: 2.6px; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 55%, var(--light-muted)); font-weight: 700;
}
.v-sell dd {
  margin: 0; font-size: 14.5px; line-height: 1.45;
  color: var(--light-ink-2); text-wrap: pretty;
}

.v-look { display: flex; flex-direction: column; gap: 20px; }
.v-label {
  display: block; margin-bottom: 10px;
  font-size: 9.5px; letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--light-muted); font-weight: 700;
}
.v-swatch { display: flex; gap: 7px; }
.v-swatch i {
  width: 30px; height: 30px; border-radius: 7px; display: block;
  box-shadow: inset 0 0 0 1px rgba(38,37,43,.14);
}
.v-type { font-size: 14px; color: var(--light-ink-2); }
.v-type span { color: var(--light-muted); }

.v-notes { border-top: 1px solid var(--light-line); padding-top: 14px; }
.v-notes summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none;
  font-size: 9.5px; letter-spacing: 2.6px; text-transform: uppercase;
  color: var(--light-muted); font-weight: 700;
}
.v-notes summary::-webkit-details-marker { display: none; }
.v-notes summary::after {
  content: '+'; font-size: 16px; letter-spacing: 0; font-weight: 400;
  transition: transform .25s var(--ease);
}
.v-notes[open] summary::after { transform: rotate(45deg); }
.v-notes summary:hover { color: var(--light-ink); }
.v-notes-body { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; }
.v-notes-body div { display: flex; flex-direction: column; gap: 2px; }
.v-notes-body b { font-size: 12px; font-weight: 600; color: var(--light-muted); }
.v-notes-body span { font-size: 13.5px; line-height: 1.45; color: var(--light-ink-2); }

/* The rail's own call to action, for when the bar has no room for one. */
.v-rail-cta { display: none; }

/* ---------- toast ---------- */
.v-toast {
  position: absolute; left: 50%; bottom: 28px; z-index: 6;
  transform: translate(-50%, 10px);
  display: flex; align-items: center; gap: 9px;
  max-width: calc(100% - 32px);
  padding: 11px 20px; border-radius: 999px;
  background: rgba(38,37,43,.94);
  border: 1px solid var(--line-strong); color: var(--ink);
  font-size: 13px; line-height: 1.3;
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.v-toast::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.v-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .v-toast { transition: opacity .3s var(--ease); transform: translate(-50%, 0); }
  .v-back:active, .v-step-btn:active, .v-cta:active { transform: none; }
  .v-sites { animation: none; }
  .v-chev, .v-tabs-ink, .v-url-out { transition: none; }
  .v-tabs { scroll-behavior: auto; }
  .v-load::after { animation-duration: 2.4s; }
}

/* ---------- smaller windows ---------- */
@media (max-width: 1240px) {
  /* No room to keep the size control dead centre; the site name gets the
     spare width instead. */
  .v-bar { display: flex; }
  .v-bar-l { flex: 1; }
  .v-dev b { display: none; }
  .v-dev button { padding: 0 12px; }
}
/* Below this the two columns stop paying their way: the site goes on top,
   the case notes read underneath it. */
@media (max-width: 1040px) {
  .v-body { flex-direction: column; overflow-y: auto; }
  /* Sized by its content once stacked — left at flex:1/min-height:0 the stage
     collapses under the scrolling body and the frame spills over the rail. */
  .v-stage { flex: none; min-height: auto; }
  .v-shell { flex: none; width: 100%; height: min(70vh, 760px); }
  .v-rail {
    width: auto; overflow: visible;
    border-left: 0; border-top: 1px solid var(--light-line);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(24px, 5vw, 56px); align-items: start;
  }
  .v-rail > .v-id { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .v-back { padding: 0; width: 38px; justify-content: center; }
  .v-back span { display: none; }
  .v-step { display: none; }
}
@media (max-width: 620px) {
  /* A phone: the bar keeps the way back and the switcher, the screen-size
     control moves down beside the page tabs (JS), and the rail carries the
     call to action. */
  .viewer { --bar-h: 58px; }
  .v-bar { display: flex; gap: 6px; padding: 0 10px; }
  .v-bar-l { flex: 1; gap: 6px; }
  .v-bar-r { display: none; }
  .v-switch { position: static; flex: 1; }
  .v-switch-btn { width: 100%; padding-right: 10px; }
  .v-switch-text { flex: 1; }
  .v-sites { left: 10px; right: 10px; width: auto; top: calc(var(--bar-h) + 6px); }
  .v-step { display: flex; }
  .v-step-btn { width: 32px; height: 32px; }
  .v-stage { padding: 10px 10px 14px; }
  .v-tools { gap: 8px; }
  .v-tools .v-dev { flex-shrink: 0; background: var(--light-bg-2); border-color: var(--light-line); }
  .v-tools .v-dev button { height: 32px; padding: 0 10px; color: var(--light-muted); }
  .v-tools .v-dev button:hover { color: var(--light-ink); background: rgba(38,37,43,.05); }
  .v-tools .v-dev button[aria-pressed="true"] { background: var(--bg); color: #fff; }
  .v-tab { padding: 0 13px; }
  .v-url { display: none; }
  .v-shell { height: min(68dvh, 680px); }
  /* Desktop on a phone is a laptop screen: 16:10, no dead space round it. */
  .viewer.desk-small .v-shell { height: auto; aspect-ratio: 16 / 10; }
  .v-rail { display: flex; align-items: stretch; padding: 26px 18px 34px; }
  .v-rail-cta {
    display: flex; flex-direction: column; gap: 14px;
    padding: 24px 22px; border-radius: 16px;
    background: var(--bg); color: #fff;
  }
  .v-rail-cta p { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; text-transform: uppercase; }
  .v-rail-cta a {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 14px 22px; border-radius: 40px;
    background: #fff; color: var(--bg);
    font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 700;
  }
}


footer { border-top: 1px solid var(--line); padding: 34px 0 60px; color: var(--muted); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }