/* /pets-assets/atlas.css */
/* ============================================================
   Berbernest · Dark Atlas design system
   Plain-CSS mirror of src/app/globals.css so prototypes port
   into the Next.js app as a translation, not a redesign.
   ============================================================ */

/* Self-hosted so the type survives the production CSP and a Google Fonts outage.
   The variable Inter file covers 300–600; Cormorant uses one roman and one italic
   file for the weights used by the site. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/pets-assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/pets-assets/fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/pets-assets/fonts/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
}

:root {
  --background: 30 18% 5%;
  --foreground: 36 38% 92%;
  --card: 30 14% 8%;
  --popover: 30 14% 8%;
  --primary: 42 52% 54%;
  --secondary: 30 10% 14%;
  --muted: 30 8% 18%;
  --muted-foreground: 36 20% 60%;
  --accent: 16 60% 50%;
  --border: 30 10% 16%;
  --ring: 42 52% 54%;
  /* 2px. Dark Atlas is an architectural language and its corner is nearly
     square; the page rendered nine different radii before this was one value.
     --r and --r-pill are declared alongside so a component can name the
     corner it wants rather than reaching for a number. */
  --radius: 2px;
  --r: 2px;
  --r-pill: 999px;

  /* Three durations and one curve. 178 elements were animating on `ease`,
     the browser's default rather than anybody's choice. */
  --t-fast: .16s;
  --t: .26s;
  --t-slow: .5s;
  --ease: cubic-bezier(.2, .6, .2, 1);

  --gold: 42 52% 54%;
  --gold-light: 42 48% 68%;
  --gold-dark: 42 56% 38%;
  --terracotta: 16 60% 50%;
  --indigo-atlas: 220 40% 30%;
  --zellij-green: 158 40% 30%;
  --sand: 36 20% 60%;
  --charcoal: 30 18% 5%;
  --cream: 36 38% 92%;
  --stone: 30 8% 18%;
  /* A tiny tile repeat derived from the hand-cut zellij reference. It appears
     only at the edge of an action, like an architectural threshold, so the
     typography stays quiet and legible. */
  --cta-zellij: conic-gradient(from 45deg at 50% 50%,
    hsl(var(--cream)) 0 12.5%, hsl(var(--terracotta)) 0 25%,
    hsl(var(--charcoal)) 0 37.5%, hsl(var(--zellij-green)) 0 50%,
    hsl(var(--cream)) 0 62.5%, hsl(var(--indigo-atlas)) 0 75%,
    hsl(var(--gold-dark)) 0 87.5%, hsl(var(--charcoal)) 0);

  --shadow-soft: 0 4px 24px -4px hsl(0 0% 0% / 0.4);
  --shadow-gold: 0 4px 32px -8px hsl(42 52% 54% / 0.15);
  --shadow-elevated: 0 8px 40px -8px hsl(0 0% 0% / 0.6);

  --font-display: "Cormorant Garamond", serif;
  --font-body: "Inter", system-ui, sans-serif;

  --shell: 1400px;
}

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; border-color: hsl(var(--border)); }

html {
  min-height: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(circle at top, hsl(var(--secondary) / 0.9), transparent 34%),
    linear-gradient(180deg, hsl(var(--background)) 0%, hsl(30 18% 4%) 100%);
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.15;
  /* Twenty-six of the forty headings on the landing page were breaking
     wherever the line ran out, which on a display serif is where you see it
     most: "A Camera Roll Forgets." with "Forgets." alone on the second
     line. `.heading-section` already balanced; every other heading now does
     too, because the rule belongs to headings and not to one class. */
  text-wrap: balance;
}

/* Body copy gets `pretty` rather than `balance`: it should keep its ragged
   right and simply refuse to end a paragraph on a single word. The hero lede
   was ending on "them." alone. */
p, li, figcaption, dd {
  text-wrap: pretty;
}

a { color: inherit; text-decoration: none; }
/*
 * `height: auto` IS NOT OPTIONAL, AND ITS ABSENCE COST TWO BANDS.
 *
 * Every <img> here carries width= and height= attributes, which is right: they
 * reserve the box before the file arrives and stop the page jumping. But a
 * presentational height attribute is a USED value, so with only `max-width` to
 * constrain it the browser draws a 168px-wide image 1,536px tall — the width
 * capped, the height untouched, the aspect ratio thrown away.
 *
 * That is what made the old "two more rooms" band 2,069px of vertical slivers,
 * and it did the same thing to the band written to replace it. It looks like a
 * layout choice and it is a missing declaration. Any rule that genuinely wants
 * a fixed height sets one; a type selector loses to every class on the page.
 */
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }

::selection {
  background: hsl(var(--gold) / 0.28);
  color: hsl(var(--foreground));
}

/* ── Layout ───────────────────────────────────────────────── */

.page-shell {
  margin-inline: auto;
  max-width: var(--shell);
  padding-inline: 1.25rem;
}
@media (min-width: 768px) {
  .page-shell { padding-inline: 3rem; }
}

/* A page that crowds its own sections reads as anxious to sell. This is the
   cheapest premium signal available and the one we were shortest on. */
/*
 * 8rem top and bottom is 256px of nothing between every pair of sections, and
 * this page has thirteen of them — three and a third screens of padding alone.
 * Air is what separates one argument from the next, and past a point it stops
 * separating and starts burying: the reader scrolls through emptiness and
 * arrives at each section having lost the last one. 6rem still reads as a break.
 */
.section { padding-block: 6rem; }
.section--tight { padding-block: 4.25rem; }
@media (max-width: 760px) {
  .section { padding-block: 4rem; }
  .section--tight { padding-block: 3rem; }
}
.section--card { background: hsl(var(--card)); }

/* ── Type ─────────────────────────────────────────────────── */

.eyebrow {
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: hsl(var(--gold));
}

.step-label {
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: hsl(var(--muted-foreground));
}

/* The jump between the largest and smallest type is most of what reads as
   expensive, and it costs nothing. Tighter leading so a two-line headline reads as
   one object rather than two lines. */
.heading-display {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6.2vw, 5.25rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.heading-section {
  /* Both ends of the clamp land on a whole pixel. The middle cannot and does
     not need to: a viewport sits at one end far more often than between them,
     and a phone clamps to the floor for every section title on the page. The
     floor was 30.4px and the ceiling 49.6px. */
  font-size: clamp(1.875rem, 3.9vw, 3.125rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.lede {
  font-size: 1rem;
  line-height: 1.85;
  color: hsl(var(--muted-foreground));
  max-width: 52ch;
}

/* EVERY PRICE, EVERY COUNT, EVERY DATE.
   Cormorant's default figures are proportional, so "€199" and "€15" set at
   different rhythms and the three format cards read as three different
   typefaces. Tabular figures give every digit the same advance, which is the
   whole reason the feature exists and the only way a column of prices sits
   straight. Applied by role rather than by class so a new price cannot be
   added without it. */
[data-price], .format__price, .fmt__price, .tally, .tally__total,
.price, .money, time, [data-count] {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.muted { color: hsl(var(--muted-foreground)); }
.gold { color: hsl(var(--gold)); }
em.gold, .gold em { font-style: italic; }

.divider-gold {
  width: 3rem;
  height: 1px;
  background: hsl(var(--gold));
  opacity: 0.5;
}

/* ── Buttons ──────────────────────────────────────────────── */

/* Presence comes from size, not decoration.
 *
 * These carried a gradient, a lit top edge, a darker bottom edge, a border, an
 * outer shadow and a two-pixel lift — six decisions to say "press me", around
 * artwork that is already the most beautiful thing on the screen. The studios this
 * brand is measured against spend almost nothing on their controls.
 *
 * 11px letterspaced at .22em is also genuinely hard to read; it looked considered
 * and behaved like fine print. */
.btn-atlas,
.btn-ghost-gold {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.15rem 2.4rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  border-radius: var(--r);
  transition: background-color var(--t-slow) cubic-bezier(0.2, 0.6, 0.2, 1), border-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}

/* The attached zellij becomes a fine mosaic perimeter rather than a photo
   pasted behind type. The 3px line reads on large and small CTAs; the quiet
   version is deliberately fainter so there is still one obvious primary. */
.btn-atlas::after,
.btn-ghost-gold::after,
.btn-zellij::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 3px;
  border-radius: inherit;
  pointer-events: none;
  background: var(--cta-zellij) center / 28px 28px;
  -webkit-mask: linear-gradient(currentColor 0 0) content-box, linear-gradient(currentColor 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.btn-ghost-gold::after { padding: 2px; opacity: .52; }
.btn-zellij { position: relative; isolation: isolate; overflow: hidden; }

/* Gold as leaf rather than paint: a shallow vertical gradient, a lit top edge and a
   darker bottom one. Flat fill read as a coloured rectangle; this reads as a
   surface with a light source, which is the register the rest of the site is in. */
.btn-atlas {
  background: hsl(var(--gold));
  color: hsl(var(--charcoal));
  /* TRANSPARENT, NOT ABSENT.
     `border: 0` here against `border: 1px` on the ghost made the filled
     button two pixels shorter than the outlined one. In the formats row
     that is three buttons side by side where the featured one caps two
     pixels below its neighbours — the kind of thing nobody names and
     everybody sees. The border is still invisible; it just occupies the
     same two pixels. */
  border: 1px solid transparent;
}
/* Nothing translates. A control that jumps under the cursor performs; one that
   warms confirms — and confirmation is the whole job of a hover state. */
.btn-atlas:hover { background: hsl(var(--gold-light)); }
.btn-atlas:active { background: hsl(38 50% 47%); }

.btn-ghost-gold {
  border: 1px solid hsl(var(--gold) / 0.28);
  color: hsl(var(--foreground));
  background: transparent;
}
.btn-ghost-gold:hover { border-color: hsl(var(--gold) / 0.7); color: hsl(var(--gold)); }
.btn-ghost-gold:active { background: hsl(var(--gold) / 0.1); }

/* A true inline secondary — the thing next to the decision, not a second decision.
   A ruled link is what it always was; a bordered box gave it equal billing. */
.btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0;
  border: 0;
  border-bottom: 1px solid hsl(var(--gold) / 0.4);
  border-radius: 0;
  background: none;
  color: hsl(var(--foreground));
  font-family: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.btn-quiet:hover { color: hsl(var(--gold)); border-bottom-color: hsl(var(--gold)); }

/* Disabled buttons had no styling at all, so a gated primary action still looked
   like the thing to press. It now reads as unavailable and stops responding to
   hover, which is what tells someone the decision above it is the one to make. */
.btn-atlas:disabled,
.btn-ghost-gold:disabled,
.btn-atlas[disabled],
.btn-ghost-gold[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  filter: saturate(0.45);
}
.btn-atlas:disabled:hover,
.btn-ghost-gold:disabled:hover {
  transform: none;
  box-shadow: none;
  background: inherit;
}
.btn-atlas:disabled:hover { background: hsl(var(--gold)); }
.btn-ghost-gold:disabled:hover { background: hsl(var(--background) / 0.35); border-color: hsl(var(--gold) / 0.4); }

/* Keyboard users had whatever ring the browser chose, which over a photograph or a
   satellite tile is frequently nothing at all. One visible ring everywhere, and
   only for keyboard focus, so a mouse click never draws it. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid hsl(var(--gold));
  outline-offset: 3px;
  border-radius: var(--r);
}

/* Off-screen until tabbed to — the first stop on the page, ahead of the header. */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: hsl(var(--gold));
  color: hsl(var(--charcoal));
  border-radius: var(--radius);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus { transform: none; }

.btn-sm { padding: 0.625rem 1.125rem; font-size: 0.625rem; letter-spacing: 0.18em; }

/* ── Surfaces ─────────────────────────────────────────────── */

.atlas-panel {
  background: linear-gradient(180deg, hsl(var(--card) / 0.98) 0%, hsl(var(--card) / 0.82) 100%);
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius);
}

.card-frosted {
  background: linear-gradient(180deg, hsl(var(--card) / 0.92) 0%, hsl(var(--card) / 0.76) 100%);
  backdrop-filter: blur(12px);
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius);
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border: 1px solid hsl(var(--gold) / 0.25);
  background: hsl(var(--gold) / 0.1);
  color: hsl(var(--gold));
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* ── Zellij motif ─────────────────────────────────────────── */

.zellij {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 0l60 60-60 60L0 60z' fill='none' stroke='%23c4905a' stroke-width='.4'/%3E%3Cpath d='M60 20l40 40-40 40L20 60z' fill='none' stroke='%23c4905a' stroke-width='.3'/%3E%3Cpath d='M60 40l20 20-20 20L40 60z' fill='none' stroke='%23c4905a' stroke-width='.2'/%3E%3C/svg%3E");
  animation: zellij-rotate 240s linear infinite, zellij-pulse 8s ease-in-out infinite;
}

@keyframes zellij-rotate { to { transform: rotate(360deg); } }
@keyframes zellij-pulse { 0%, 100% { opacity: 0.16; } 50% { opacity: 0.30; } }
@keyframes chevron-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.reveal { opacity: 0; animation: fade-up 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* ── Site chrome ──────────────────────────────────────────── */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  backdrop-filter: blur(14px);
  background: hsl(var(--background) / 0.72);
  border-bottom: 1px solid hsl(var(--border));
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 68px;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wordmark span { color: hsl(var(--gold)); }
/* It is a link and it has a pointer cursor, and it answered neither. Measured:
   transition all 0s, nothing changes on hover. The mark is the way home from
   every screen on the site. */
a.wordmark { transition: opacity var(--t-fast) var(--ease); }
a.wordmark:hover { opacity: .78; }
a.wordmark:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 4px; }

.site-nav {
  display: none;
  gap: 2rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(var(--muted-foreground));
}
@media (min-width: 900px) { .site-nav { display: flex; } }
.site-nav a { transition: color var(--t) var(--ease); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: hsl(var(--gold)); }

.site-footer {
  border-top: 1px solid hsl(var(--border));
  padding-block: 3rem;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

/* ── Property switcher (prototype-only chrome) ────────────── */

.proto-switch {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: var(--r-pill);
  background: hsl(var(--background) / 0.9);
  border: 1px solid hsl(var(--border));
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-elevated);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.proto-switch a {
  padding: 0.45rem 0.85rem;
  border-radius: var(--r-pill);
  color: hsl(var(--muted-foreground));
  transition: all var(--t) var(--ease);
  white-space: nowrap;
}
.proto-switch a:hover { color: hsl(var(--foreground)); }
.proto-switch a.is-active {
  background: hsl(var(--gold));
  color: hsl(var(--charcoal));
}

/* /pets-assets/mobile-controls.css */
/* Shared by the static creator and Next.js pages. Keep touch-entry text legible
   without disabling browser zoom or changing checkbox/range controls. */
@media (max-width: 1023px), (pointer: coarse) {
  input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="color"]),
  textarea,
  select {
    font-size: max(1rem, 16px) !important;
    min-height: 44px;
  }
}

/* /pets-assets/prodigi-frames.css */
/* Classic flat 20mm moulding, with Prodigi's own photographed finish samples.
   All dimensions are relative to the selected product, not the viewport. */
.pd-frame { position: relative; display: block; box-sizing: border-box; margin: 0;
  aspect-ratio: var(--pd-ratio, 34 / 44); padding: 0; border: 0; border-radius: 0;
  background: var(--pd-texture, #101010) center / 100px 100px;
  box-shadow: 0 14px 28px -14px #0009, 1px 2px 3px #0005; }
.pd-frame > .pd-glaze { position: absolute; inset: var(--pd-face-y) var(--pd-face-x);
  background: #f9f9f9; box-shadow: inset 0 0 2px #0008; }
.pd-frame .pd-aperture { background: white; position: absolute; inset: var(--pd-mount-y) var(--pd-mount-x);
  overflow: hidden; box-shadow: 0 0 0 1px #e0e0e0, 0 1px 2px #0003; }
.pd-frame .pd-aperture img { position: absolute; width: 100%; height: 100%; inset: 0;
  display: block; object-fit: contain; object-position: center; border: 0; padding: 0; border-radius: 0; }
.pd-frame .pd-glaze::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, #ffffff06, transparent 45%); }
.pd-frame[data-framed="false"] { background: none; }
.pd-frame[data-framed="false"] .pd-glaze::after { display: none; }
.pd-reference { display: flex; align-items: center; gap: 1rem; margin-top: 1rem;
  padding: .75rem; border: 1px solid hsl(var(--border)); text-align: left; }
.pd-reference img { flex: 0 0 auto; width: 54px; height: 90px; object-fit: contain; background: #fff; }
.pd-reference p { margin: 0; font-size: .8125rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }
.pd-reference strong { display: block; color: hsl(var(--foreground)); font-weight: 500; }
/* Separate mitred rails keep photographed grain running along each moulding. */
.pd-frame > .pd-rail { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pd-frame > .pd-rail::before { content: ""; position: absolute; inset: -100%;
  background: var(--pd-texture, #101010) center / 100px 100px; transform: rotate(30deg); }
.pd-frame > .pd-top { clip-path: polygon(0 0,100% 0,calc(100% - var(--pd-face-x)) var(--pd-face-y),var(--pd-face-x) var(--pd-face-y)); }
.pd-frame > .pd-right { clip-path: polygon(100% 0,100% 100%,calc(100% - var(--pd-face-x)) calc(100% - var(--pd-face-y)),calc(100% - var(--pd-face-x)) var(--pd-face-y)); }
.pd-frame > .pd-bottom { clip-path: polygon(0 100%,100% 100%,calc(100% - var(--pd-face-x)) calc(100% - var(--pd-face-y)),var(--pd-face-x) calc(100% - var(--pd-face-y))); }
.pd-frame > .pd-left { clip-path: polygon(0 0,var(--pd-face-x) var(--pd-face-y),var(--pd-face-x) calc(100% - var(--pd-face-y)),0 100%); }
.pd-frame > .pd-top::before,.pd-frame > .pd-bottom::before { transform: rotate(-60deg); }
.pd-frame[data-framed="false"] > .pd-rail { display: none; }

/* /pets-assets/cache/landing.90c29166df47.css */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

  :root {
    --majorelle: 214 68% 40%;
    --zellij-green: 158 40% 30%;
    --saffron: 38 74% 55%;
    --tadelakt: 32 20% 88%;

    --rosette-art: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpolygon%20points%3D%2243.40%2C32.04%2030.22%2C30.22%2032.04%2C43.40%2024.00%2C32.80%2015.96%2C43.40%2017.78%2C30.22%204.60%2C32.04%2015.20%2C24.00%204.60%2C15.96%2017.78%2C17.78%2015.96%2C4.60%2024.00%2C15.20%2032.04%2C4.60%2030.22%2C17.78%2043.40%2C15.96%2032.80%2C24.00%22%20fill%3D%22none%22%20stroke%3D%22%23d8b25f%22%20stroke-width%3D%221.3%22%2F%3E%3Cpolygon%20points%3D%2235.50%2C24.00%2028.43%2C25.84%2032.13%2C32.13%2025.84%2C28.43%2024.00%2C35.50%2022.16%2C28.43%2015.87%2C32.13%2019.57%2C25.84%2012.50%2C24.00%2019.57%2C22.16%2015.87%2C15.87%2022.16%2C19.57%2024.00%2C12.50%2025.84%2C19.57%2032.13%2C15.87%2028.43%2C22.16%22%20fill%3D%22none%22%20stroke%3D%22%23d8b25f%22%20stroke-width%3D%221%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%222.4%22%20fill%3D%22%23d8b25f%22%2F%3E%3C%2Fsvg%3E");
  }

  }

  .zellij-field {
    position: absolute; inset: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2284%22%20height%3D%2284%22%20viewBox%3D%220%200%2084%2084%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23d8b25f%22%20stroke-width%3D%221%22%3E%3Cpolygon%20points%3D%2216.63%2C6.89%205.37%2C5.37%206.89%2C16.63%200.00%2C7.60%20-6.89%2C16.63%20-5.37%2C5.37%20-16.63%2C6.89%20-7.60%2C0.00%20-16.63%2C-6.89%20-5.37%2C-5.37%20-6.89%2C-16.63%20-0.00%2C-7.60%206.89%2C-16.63%205.37%2C-5.37%2016.63%2C-6.89%207.60%2C-0.00%22%2F%3E%3Cpolygon%20points%3D%22100.63%2C6.89%2089.37%2C5.37%2090.89%2C16.63%2084.00%2C7.60%2077.11%2C16.63%2078.63%2C5.37%2067.37%2C6.89%2076.40%2C0.00%2067.37%2C-6.89%2078.63%2C-5.37%2077.11%2C-16.63%2084.00%2C-7.60%2090.89%2C-16.63%2089.37%2C-5.37%20100.63%2C-6.89%2091.60%2C-0.00%22%2F%3E%3Cpolygon%20points%3D%2216.63%2C90.89%205.37%2C89.37%206.89%2C100.63%200.00%2C91.60%20-6.89%2C100.63%20-5.37%2C89.37%20-16.63%2C90.89%20-7.60%2C84.00%20-16.63%2C77.11%20-5.37%2C78.63%20-6.89%2C67.37%20-0.00%2C76.40%206.89%2C67.37%205.37%2C78.63%2016.63%2C77.11%207.60%2C84.00%22%2F%3E%3Cpolygon%20points%3D%22100.63%2C90.89%2089.37%2C89.37%2090.89%2C100.63%2084.00%2C91.60%2077.11%2C100.63%2078.63%2C89.37%2067.37%2C90.89%2076.40%2C84.00%2067.37%2C77.11%2078.63%2C78.63%2077.11%2C67.37%2084.00%2C76.40%2090.89%2C67.37%2089.37%2C78.63%20100.63%2C77.11%2091.60%2C84.00%22%2F%3E%3Cpolygon%20points%3D%2258.63%2C48.89%2047.37%2C47.37%2048.89%2C58.63%2042.00%2C49.60%2035.11%2C58.63%2036.63%2C47.37%2025.37%2C48.89%2034.40%2C42.00%2025.37%2C35.11%2036.63%2C36.63%2035.11%2C25.37%2042.00%2C34.40%2048.89%2C25.37%2047.37%2C36.63%2058.63%2C35.11%2049.60%2C42.00%22%2F%3E%3Cpolygon%20points%3D%2250.00%2C0.00%2044.55%2C2.55%2042.00%2C8.00%2039.45%2C2.55%2034.00%2C0.00%2039.45%2C-2.55%2042.00%2C-8.00%2044.55%2C-2.55%22%2F%3E%3Cpolygon%20points%3D%228.00%2C42.00%202.55%2C44.55%200.00%2C50.00%20-2.55%2C44.55%20-8.00%2C42.00%20-2.55%2C39.45%20-0.00%2C34.00%202.55%2C39.45%22%2F%3E%3Cpolygon%20points%3D%2292.00%2C42.00%2086.55%2C44.55%2084.00%2C50.00%2081.45%2C44.55%2076.00%2C42.00%2081.45%2C39.45%2084.00%2C34.00%2086.55%2C39.45%22%2F%3E%3Cpolygon%20points%3D%2250.00%2C84.00%2044.55%2C86.55%2042.00%2C92.00%2039.45%2C86.55%2034.00%2C84.00%2039.45%2C81.45%2042.00%2C76.00%2044.55%2C81.45%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-size: 84px 84px;
    opacity: .22;
  }
  .zellij-field--dense { background-size: 56px 56px; opacity: .16; }

  .zellij-band {
    height: 34px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20fill%3D%22%23a84b2c%22%2F%3E%3Cpolygon%20points%3D%2232.47%2C25.17%2024.03%2C24.03%2025.17%2C32.47%2020.00%2C25.70%2014.83%2C32.47%2015.97%2C24.03%207.53%2C25.17%2014.30%2C20.00%207.53%2C14.83%2015.97%2C15.97%2014.83%2C7.53%2020.00%2C14.30%2025.17%2C7.53%2024.03%2C15.97%2032.47%2C14.83%2025.70%2C20.00%22%20fill%3D%22%23e7ded0%22%2F%3E%3Cpolygon%20points%3D%229.24%2C23.83%202.97%2C22.97%203.83%2C29.24%200.00%2C24.20%20-3.83%2C29.24%20-2.97%2C22.97%20-9.24%2C23.83%20-4.20%2C20.00%20-9.24%2C16.17%20-2.97%2C17.03%20-3.83%2C10.76%20-0.00%2C15.80%203.83%2C10.76%202.97%2C17.03%209.24%2C16.17%204.20%2C20.00%22%20fill%3D%22%232f6b52%22%2F%3E%3Cpolygon%20points%3D%2249.24%2C23.83%2042.97%2C22.97%2043.83%2C29.24%2040.00%2C24.20%2036.17%2C29.24%2037.03%2C22.97%2030.76%2C23.83%2035.80%2C20.00%2030.76%2C16.17%2037.03%2C17.03%2036.17%2C10.76%2040.00%2C15.80%2043.83%2C10.76%2042.97%2C17.03%2049.24%2C16.17%2044.20%2C20.00%22%20fill%3D%22%232f6b52%22%2F%3E%3Cpolygon%20points%3D%2225.00%2C0.00%2021.56%2C1.56%2020.00%2C5.00%2018.44%2C1.56%2015.00%2C0.00%2018.44%2C-1.56%2020.00%2C-5.00%2021.56%2C-1.56%22%20fill%3D%22%23d8a33f%22%2F%3E%3Cpolygon%20points%3D%2225.00%2C40.00%2021.56%2C41.56%2020.00%2C45.00%2018.44%2C41.56%2015.00%2C40.00%2018.44%2C38.44%2020.00%2C35.00%2021.56%2C38.44%22%20fill%3D%22%23d8a33f%22%2F%3E%3Crect%20width%3D%2240%22%20height%3D%222.4%22%20fill%3D%22%232f6b52%22%2F%3E%3Crect%20y%3D%2237.6%22%20width%3D%2240%22%20height%3D%222.4%22%20fill%3D%22%232f6b52%22%2F%3E%3C%2Fsvg%3E");
    background-size: 34px 34px;
    background-repeat: repeat-x;
    border-block: 1px solid hsl(30 18% 4%);
    box-shadow: inset 0 8px 14px -8px hsl(0 0% 0% / .8), inset 0 -8px 14px -8px hsl(0 0% 0% / .8);
  }
  .zellij-band--tall { height: 46px; background-size: 46px 46px; }

  .rosette {
    width: 40px; height: 40px; margin: 0 auto .9rem;
    background-image: var(--rosette-art);
    background-size: contain; background-repeat: no-repeat;
    opacity: .75;
  }

  .arch { clip-path: url(#moorish-arch); }
  .arch-frame {
    position: relative;
    padding: 10px;
    background:
      linear-gradient(hsl(var(--gold) / .30), hsl(var(--gold) / .08)),
      hsl(30 18% 7%);
    clip-path: url(#moorish-arch);
  }
  .arch-frame > * { clip-path: url(#moorish-arch); display: block; width: 100%; height: 100%; }

  .medallion {
    position: relative; width: 52px; height: 52px;
    display: grid; place-items: center;
    color: hsl(var(--gold));
  }
  .medallion::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--rosette-art);
    background-size: contain; background-repeat: no-repeat;
    opacity: .55;
  }
  .medallion svg { position: relative; z-index: 1; }

  .accent-green { color: hsl(var(--zellij-green)); }
  .accent-blue { color: hsl(var(--majorelle)); }

  .tri-rule {
    width: 132px; height: 24px; margin: 1.1rem auto 0;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22132%22%20height%3D%2224%22%20viewBox%3D%220%200%20132%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%232f6b52%22%20stroke-width%3D%221%22%20opacity%3D%22.9%22%3E%3Cpath%20d%3D%22M0%2012h32M100%2012h32%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2834%204.5%29%20scale%28.62%29%22%3E%3Cpath%20d%3D%22M12%200%2013.7%206.9%2020.5%205.1%2017%2011.2%2024%2012%2017%2012.8%2020.5%2018.9%2013.7%2017.1%2012%2024%2010.3%2017.1%203.5%2018.9%207%2012.8%200%2012%207%2011.2%203.5%205.1%2010.3%206.9Z%22%20fill%3D%22%232f6b52%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2859%205%29%22%3E%3Cpath%20d%3D%22M7%200%2014%207%207%2014%200%207Z%22%20fill%3D%22%23d8a33f%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2883%204.5%29%20scale%28.62%29%22%3E%3Cpath%20d%3D%22M12%200%2013.7%206.9%2020.5%205.1%2017%2011.2%2024%2012%2017%2012.8%2020.5%2018.9%2013.7%2017.1%2012%2024%2010.3%2017.1%203.5%2018.9%207%2012.8%200%2012%207%2011.2%203.5%205.1%2010.3%206.9Z%22%20fill%3D%22%232a5ba8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-size: 132px 24px; background-repeat: no-repeat;
    opacity: .9;
  }

  .hero--sun .tri-rule, .section--plaster .tri-rule { opacity: .62; }

  .hero--sun { background: none; color: hsl(24 30% 16%); padding-block: 8.5rem 2.5rem; }
  .hero--sun .hero__bg { background:
      linear-gradient(180deg, hsl(36 58% 94% / .66) 0%, hsl(30 46% 87% / .74) 48%, hsl(22 40% 76% / .82) 100%),
      linear-gradient(90deg, hsl(30 48% 88% / .28), transparent 34%, transparent 66%, hsl(24 42% 76% / .2)),
      url("/pets-assets/hero-marrakech-v4.webp") center top / cover no-repeat; }

  .hero--sun .eyebrow { color: hsl(16 66% 28%); }
  .hero--sun h1 { color: hsl(24 34% 13%); }
  .hero--sun h1 em { color: hsl(16 68% 40%); }
  .hero--sun .lede { color: hsl(24 22% 30%); }
  .hero__price { margin-top: .9rem; font-size: .9375rem; color: hsl(24 26% 26%); }
  .hero__price b { color: hsl(16 68% 40%); font-weight: 600; }

  .herodrop {
    position: relative; width: 100%; margin-top: .5rem; padding: 1.15rem 1.5rem;
    min-height: 118px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 1px dashed hsl(18 45% 46% / .5); border-radius: var(--r); cursor: pointer;
    background: hsl(38 55% 94% / .5); text-align: center; transition: all var(--t) var(--ease);
  }
  .herodrop:hover, .herodrop.is-over { border-color: hsl(16 68% 42%); background: hsl(38 60% 96% / .85); transform: translateY(-2px); box-shadow: 0 14px 34px -16px hsl(20 50% 25% / .55); }

  .herodrop:focus-within {
    border-color: hsl(16 68% 42%);
    background: hsl(38 60% 96% / .85);
    outline: 3px solid hsl(16 68% 42%);
    outline-offset: 3px;
  }
  .herodrop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .herodrop__ico { width: 28px; height: 28px; margin: 0 auto .5rem; color: hsl(16 68% 42%); }
  .herodrop strong { display: block; font-family: var(--font-display); font-size: 1.375rem; color: hsl(24 34% 13%); }
  .herodrop span { display: block; margin-top: .2rem; font-size: .8125rem; color: hsl(24 20% 38%); }
  .herodrop__or { margin-top: .85rem; font-size: .6875rem; letter-spacing: .04em; color: hsl(24 20% 42%); }
  .herodrop__or a { color: hsl(16 68% 40%); text-decoration: underline; text-underline-offset: 2px; }

  .hero__ticks { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: .5rem 1.15rem; font-size: .75rem; color: hsl(24 24% 22%); }
  .hero__ticks span { display: inline-flex; align-items: center; gap: .35rem; }
  .hero__ticks span::before { content: "✓"; color: hsl(158 46% 24%); font-weight: 700; }

  .ba { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto;
        column-gap: .5rem; row-gap: 0; align-items: center; }
  .ba figure { display: contents; }
  .ba > figure:first-of-type > .ba__shot { grid-area: 1 / 1; }
  .ba > figure:first-of-type > .ba__cap  { grid-area: 2 / 1; }
  .ba > .ba__arrow                       { grid-area: 1 / 2; }
  .ba > figure:last-of-type > .ba__shot  { grid-area: 1 / 3; }
  .ba > figure:last-of-type > .ba__cap   { grid-area: 2 / 3; }
  .ba__shot { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--r); background: hsl(30 14% 12%); box-shadow: 0 18px 40px -18px hsl(20 40% 15% / .8); }
  .ba__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ba__tag { position: absolute; top: .5rem; left: .5rem; padding: .18rem .5rem; border-radius: var(--r); font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
  .ba__tag--b { background: hsl(24 12% 22% / .88); color: hsl(36 20% 84%); }
  .ba__tag--a { background: hsl(var(--gold)); color: hsl(var(--charcoal)); }
  .ba__arrow { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: hsl(16 68% 42%); color: #fff; font-size: .875rem; box-shadow: 0 4px 12px -3px hsl(20 50% 25% / .6); }

  .ba__cap { margin-top: .8rem; min-height: 2lh; font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; text-align: center; color: hsl(24 20% 40%); text-wrap: balance; }
  @supports not (height: 1lh) { .ba__cap { min-height: 2.1rem; } }

  @media (max-width: 560px) { .ba__cap { letter-spacing: .08em; } }

  .section--proof { background: hsl(var(--card)); }

  .proof-grid { display: grid; gap: 2rem; width: min(100%, 820px); margin-inline: auto; }
  @media (max-width: 899px) {
    .proof-grid {
      grid-auto-flow: column;
      grid-auto-columns: min(68vw, 260px);
      gap: 1rem;
      margin-inline: -1.25rem;
      padding-inline: calc((100vw - min(68vw, 260px)) / 2);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .proof-grid::-webkit-scrollbar { display: none; }
    .proof-grid > * { scroll-snap-align: center; }
  }
  @media (min-width: 900px) { .proof-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

  .proof-grid .ba__cap { color: hsl(38 30% 78%); }
  .proof-controls { display: none; }
  @media (max-width: 640px) {
    .proof-controls {
      display: flex; align-items: center; justify-content: center; gap: .9rem;
      margin-top: 1rem;
    }
    .proof-controls button {
      width: 44px; height: 44px; display: grid; place-items: center;
      border: 1px solid hsl(var(--border)); border-radius: var(--r);
      background: hsl(var(--background)); color: hsl(var(--foreground));
      font-size: 1rem;
    }
    .proof-controls button:hover, .proof-controls button:focus-visible {
      border-color: hsl(var(--gold) / .65); color: hsl(var(--gold));
    }
    .proof-controls p {
      min-width: 7.5rem; text-align: center; font-size: .625rem;
      letter-spacing: .14em; text-transform: uppercase;
      color: hsl(var(--muted-foreground));
    }
    .proof-controls p span { color: hsl(var(--gold)); }
  }
  .proof-note { margin-top: 2.5rem; text-align: center; font-size: .75rem; line-height: 1.9; color: hsl(var(--muted-foreground) / .85); }

  .newstudio { box-sizing: content-box; max-width: 720px; margin: 0 auto; text-align: center; }
  .newstudio__grid { margin-top: 2rem; display: grid; gap: 1rem; text-align: left; }
  @media (min-width: 760px) { .newstudio__grid { grid-template-columns: repeat(3, 1fr); } }
  .ns { padding: 1.35rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
  .ns b { display: block; font-family: var(--font-display); font-size: 1.125rem; }
  .ns p { margin-top: .35rem; font-size: .8125rem; line-height: 1.7; color: hsl(var(--muted-foreground)); }

  .atlas { display: none; }
  body.no3d .map { display: none; }
  body.no3d .atlas { display: block; }

  .map-views { display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; }
  .map-views button { margin:0; min-height:48px; padding:.65rem 1rem; border:1px solid hsl(var(--border)); border-radius:var(--r); background:hsl(var(--card)); color:hsl(var(--foreground)); font-size:14px; }
  .map-views button[aria-pressed="true"] { border-color:hsl(var(--gold)); color:hsl(var(--gold)); }
  .map-views button:focus-visible { outline:2px solid hsl(var(--gold)); outline-offset:4px; }
  .map-status { max-width:65ch; margin:.75rem auto 1.5rem; font-size:14px; line-height:1.6; color:hsl(var(--muted-foreground)); }

  #atlas { max-width:1248px; margin:0 auto; padding:0 24px 32px; }
  .atlas__intro { display:flex; justify-content:space-between; align-items:end; gap:2rem; padding:1rem 0 1.5rem; border-top:1px solid hsl(var(--border)); }
  .atlas__eyebrow { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:hsl(var(--gold)); }
  .atlas__intro h3 { margin-top:.5rem; font:400 clamp(28px,3vw,36px)/1.1 var(--font-display); color:hsl(var(--foreground)); }
  .atlas__intro > p { max-width:43ch; font-size:14px; line-height:1.7; color:hsl(var(--muted-foreground)); }
  .atlas__quarters { display:flex; flex-wrap:wrap; gap:.5rem; padding:.5rem 0 1rem; }
  .atlas__q { min-height:44px; padding:.6rem .9rem; border:1px solid hsl(var(--border)); border-radius:var(--r-pill); background:transparent; color:hsl(var(--muted-foreground)); font-size:14px; white-space:nowrap; }
  .atlas__q.is-on { border-color:hsl(var(--gold)); color:hsl(var(--gold)); background:hsl(var(--gold) / .08); }
  .atlas__browse { display:flex; align-items:end; justify-content:space-between; gap:1.5rem; padding:.25rem 0 1rem; }
  .atlas__search { width:min(100%,390px); }
  .atlas__search label { display:block; margin-bottom:.5rem; font-size:14px; color:hsl(var(--foreground)); }
  .atlas__search input { width:100%; min-height:48px; padding:.7rem .9rem; border:1px solid hsl(var(--border)); border-radius:var(--r); background:hsl(var(--card)); color:hsl(var(--foreground)); font:inherit; font-size:16px; }
  .atlas__browse-controls { display:flex; align-items:center; gap:.5rem; }
  .atlas__browse-controls p { padding-right:.5rem; font-size:14px; line-height:1.5; color:hsl(var(--muted-foreground)); }
  .atlas__browse-controls button { flex:none; width:48px; height:48px; border:1px solid hsl(var(--border)); border-radius:var(--r); background:hsl(var(--card)); color:hsl(var(--gold)); font-size:20px; }
  .atlas__browse-controls button:disabled { opacity:.4; cursor:default; }
  .atlas__grid { display:grid; grid-template-rows:1fr; grid-auto-flow:column; grid-auto-columns:calc((100% - 48px)/4); align-items:stretch; gap:16px; padding:4px 2px 18px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:2px; scrollbar-width:thin; scrollbar-color:hsl(var(--gold)) hsl(var(--border)); }
  .atlas__grid > * { scroll-snap-align:start; }
  .acard { position:relative; display:flex; flex-direction:column; min-width:0; border:1px solid hsl(var(--border)); border-radius:var(--r); background:hsl(var(--card)); overflow:hidden; transition:border-color var(--t) var(--ease); }
  .acard:hover, .acard:focus-within { border-color:hsl(var(--gold) / .7); }
  .acard__visual { position:relative; display:block; width:100%; padding:12px 12px 0; border:0; background:transparent; color:hsl(var(--gold)); text-align:center; }
  .acard__visual > img { display:block; width:100%; aspect-ratio:3/4; object-fit:contain; background:hsl(var(--background)); }
  .acard__zoom { display:block; padding:.65rem .25rem; font-size:13px; }
  .acard__body { display:flex; flex:1; flex-direction:column; padding:0 16px 12px; }
  .acard__n { min-height:2.2em; font:400 24px/1.1 var(--font-display); color:hsl(var(--foreground)); text-wrap:balance; }
  .acard__h { display:block; margin-top:.5rem; font-size:13px; line-height:1.5; color:hsl(var(--gold)); }
  .acard__why { margin-top:.65rem; font-size:14px; line-height:1.6; color:hsl(var(--muted-foreground)); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .acard__actions { display:grid; gap:0; margin-top:auto; padding-top:1rem; }
  .acard__pick { min-height:48px; padding:.65rem .5rem; border:1px solid hsl(var(--gold)); border-radius:var(--r); background:hsl(var(--gold)); color:hsl(var(--charcoal)); font:500 14px/1.4 var(--font-body); }
  .acard__story { display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; border:0; background:transparent; font-family:inherit; font-size:14px; color:hsl(var(--muted-foreground)); text-decoration:underline; text-underline-offset:4px; }
  #atlas button:focus-visible, #atlas input:focus-visible, #atlas a:focus-visible, .atlas__grid:focus-visible { outline:2px solid hsl(var(--gold)); outline-offset:2px; }

  .atlas__index { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid hsl(var(--border)); }
  .atlas__index-list { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .9rem 1.6rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .atlas__index-list ul { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .1rem; }
  .atlas__index-q { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--gold)); }
  .atlas__index a { display: inline-flex; min-height: 44px; align-items: center; font-family: var(--font-display); font-size: 19px; color: hsl(var(--foreground)); text-decoration: none; transition: color var(--t-fast) var(--ease); }
  .atlas__index a:hover { color: hsl(var(--gold)); }
  .atlas__index small { margin-left: .45rem; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
  .atlas__empty, .atlas__footnote { padding:1rem 0; font-size:14px; line-height:1.7; color:hsl(var(--muted-foreground)); }
  .atlas__empty button, .atlas__footnote a { display:inline-flex; align-items:center; min-height:44px; color:hsl(var(--gold)); text-decoration:underline; text-underline-offset:4px; }
  @media (min-width:620px) and (max-width:1023px) { .atlas__grid { grid-auto-columns:calc((100% - 32px)/3); } }
  @media (max-width:619px) {
    #atlas { padding-inline:16px; }
    .atlas__intro { display:block; padding-bottom:1rem; }
    .atlas__intro > p { margin-top:.75rem; }
    .atlas__quarters { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; padding-bottom:.75rem; }
    .atlas__q { flex:none; }
    .atlas__browse { display:block; }
    .atlas__search { width:100%; }
    .atlas__browse-controls { margin-top:.75rem; }
    .atlas__browse-controls p { flex:1; }
    .atlas__grid { grid-auto-columns:min(80vw,320px); gap:12px; }
    .acard__n { min-height:0; }
  }

  .atlassheet { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; color: hsl(var(--foreground)); position: fixed; inset: 0; z-index: 90; display: grid; align-items: end;
    background: hsl(30 18% 3% / .8); backdrop-filter: blur(3px); }
  .atlassheet[hidden] { display: none; }
  .atlassheet__panel { position: relative; max-height: 92vh; overflow-y: auto;
    background: hsl(var(--background)); border-top: 1px solid hsl(var(--gold) / .35);
    border-radius: var(--r) var(--r) 0 0; -webkit-overflow-scrolling: touch; }
  @media (min-width: 700px) {
    .atlassheet { align-items: center; justify-items: center; padding: 2rem; }
    .atlassheet__panel { max-width: 460px; border-radius: var(--r); border: 1px solid hsl(var(--gold) / .35); }
  }
  .atlassheet__x { position: absolute; top: .7rem; right: .7rem; z-index: 3;
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    background: hsl(var(--background) / .82); border: 1px solid hsl(var(--border));
    color: hsl(var(--foreground)); font-size: .875rem; }
  .atlassheet__img { width: 100%; display: block; aspect-ratio: 3 / 4; max-height: 44vh;
    object-fit: contain; background: hsl(var(--secondary)); }
  .atlassheet__body { padding: 1.15rem 1.25rem 1.6rem; }
  .atlassheet__k { font-size: .625rem; letter-spacing: .22em; text-transform: uppercase;
    color: hsl(var(--gold)); }
  .atlassheet__h { margin-top: .3rem; font-family: var(--font-display); font-size: 1.625rem;
    font-weight: 300; line-height: 1.15; }
  .atlassheet__pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
  .atlassheet__p { margin-top: .8rem; font-size: .875rem; line-height: 1.75;
    color: hsl(var(--foreground)); }
  .atlassheet__p--muted { font-size: .8125rem; color: hsl(var(--muted-foreground)); }
  .atlassheet__go { width: 100%; margin-top: 1.35rem; }

  @media (max-width: 619px) {

    .atlassheet__panel { max-height: 88svh; }
    .atlassheet__img {
      width: 100%; height: min(30svh, 220px); max-height: none; aspect-ratio: auto;
      object-fit: contain; object-position: center; background: hsl(var(--background));
    }
    .atlassheet__body { padding: 1rem 1.1rem 1.25rem; }
  }

  .shootrow { display: flex; gap: .6rem; align-items: center; justify-content: center; margin-top: .85rem; flex-wrap: wrap; }
  .shootrow__or { font-size: .75rem; color: hsl(24 20% 42%); }
  .btn-shoot {
    display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.15rem;
    border: 1px solid hsl(18 45% 46% / .6); border-radius: var(--r); background: hsl(38 55% 96% / .7);
    color: hsl(16 68% 36%); font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    transition: all var(--t) var(--ease);
  }
  .btn-shoot:hover { background: hsl(16 68% 42%); color: #fff; border-color: hsl(16 68% 42%); }
  .btn-shoot svg { width: 16px; height: 16px; }

  .step-pane .shootrow__or { color: hsl(var(--muted-foreground)); }
  .step-pane .btn-shoot { background: none; border-color: hsl(var(--gold) / .45); color: hsl(var(--gold)); }
  .step-pane .btn-shoot:hover { background: hsl(var(--gold)); color: hsl(var(--charcoal)); }

  .cam { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 1.25rem;
    background: hsl(30 18% 3% / .93); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity var(--t) var(--ease); }
  .cam.is-open { opacity: 1; pointer-events: auto; }
  .cam__box { width: 100%; max-width: 520px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-elevated); }
  .cam__stage { position: relative; aspect-ratio: 3/4; background: #000; overflow: hidden; }
  .cam__stage video, .cam__stage canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cam__stage canvas { display: none; }
  .cam.is-shot .cam__stage video { display: none; }
  .cam.is-shot .cam__stage canvas { display: block; }
  .cam__guide { position: absolute; inset: 12%; border: 2px dashed hsl(var(--gold) / .55); border-radius: var(--r); pointer-events: none; }
  .cam.is-shot .cam__guide { display: none; }
  .cam__hint { position: absolute; inset: auto 0 0 0; padding: 2rem .9rem .8rem; text-align: center; font-size: .75rem;
    background: linear-gradient(transparent, hsl(0 0% 0% / .8)); color: hsl(36 30% 88%); }
  .cam__bar { display: flex; gap: .6rem; padding: 1rem 1.15rem; }
  .cam__bar .btn-atlas, .cam__bar .btn-ghost-gold { flex: 1; }
  .cam__err { padding: 2.5rem 1.5rem; text-align: center; }
  .cam__err p { font-size: .875rem; line-height: 1.8; color: hsl(var(--muted-foreground)); }

  .city-slider { width: min(100%, 940px); margin: 1.75rem auto 0; padding-inline: 20px; }
  .city-slider__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
  .city-slider__head p { margin: 0; font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
  .city-slider__controls { display: flex; gap: .4rem; }
  .city-slider__controls button { width: 44px; height: 44px; display: grid; place-items: center;
    border: 1px solid hsl(var(--border)); border-radius: var(--r); background: hsl(var(--card));
    color: hsl(var(--foreground)); font-size: 1rem; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
  .city-slider__controls button:hover { border-color: hsl(var(--gold) / .6); color: hsl(var(--gold)); background: hsl(var(--secondary)); }
  .lifestyle { display: grid; grid-auto-flow: column; grid-auto-columns: 138px; gap: .75rem;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: 1px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .lifestyle::-webkit-scrollbar { display: none; }
  @media (min-width: 700px) { .lifestyle { grid-auto-columns: 156px; gap: .85rem; } }
  @media (min-width: 1100px) { .lifestyle { grid-auto-columns: 166px; } }
  .ls { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--r); background: hsl(var(--card)); }
  .lifestyle .ls { scroll-snap-align: start; }
  .ls img { width: 100%; height: 100%; object-fit: cover; transition: filter var(--t-slow) var(--ease); }
  .ls:hover img { filter: brightness(1.06); }
  .ls figcaption { position: absolute; inset: auto 0 0 0; padding: 2rem .7rem .65rem;
    background: linear-gradient(transparent, hsl(30 18% 4% / .92));
    font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: hsl(36 30% 86%); }

  .lifestyle-note { margin-top: 1.75rem; padding-inline: 20px; text-align: center; font-size: .6875rem; line-height: 1.8; color: hsl(var(--muted-foreground) / .75); }

  .pickgrid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .pickgrid > .pick[hidden] { display: none; }
  .pickgroup__h { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem;
    margin: 1.1rem 0 -.1rem; font-family: var(--font-display); font-size: 1.375rem; font-weight: 400; color: hsl(var(--foreground)); }
  .pickgroup__h:first-child { margin-top: 0; }
  .pickgroup__h small { font-family: var(--font-body); font-size: .8125rem; color: hsl(var(--muted-foreground)); }
  .pickgroup__more { grid-column: 1 / -1; justify-self: start; min-height: 44px; padding: 0 .2rem; border: 0; background: none;
    color: hsl(var(--gold)); font: inherit; font-size: .9375rem; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
  .pickgroup__more:hover { color: hsl(var(--gold-lit, var(--gold))); }
  .pick {
    position: relative; display: block; width: 100%; padding: 0; text-align: left; overflow: hidden;
    border: 1px solid hsl(var(--border)); background: hsl(var(--card)); border-radius: var(--r);
    transition: border-color var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
  }
  .pick:hover { border-color: hsl(var(--gold) / .5); box-shadow: var(--shadow-elevated); }
  .pick.is-current { border-color: hsl(var(--gold)); box-shadow: var(--shadow-gold); }
  .pick__img { position: relative; aspect-ratio: 4/5; overflow: hidden; }
  .pick__img img { width: 100%; height: 100%; object-fit: cover; }
  .pick__ico { position: absolute; bottom: 6px; right: 6px; width: 38px; height: 38px; filter: drop-shadow(0 3px 7px hsl(0 0% 0% / .9)); }
  .pick__ico svg { width: 100%; height: 100%; }
  .pick__b { padding: .7rem .75rem .8rem; }
  .pick__b b { display: block; font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1.35; }
  .pick__b span { display: block; margin-top: .15rem; font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
  .pick__now { position: absolute; top: .5rem; left: .5rem; z-index: 2; padding: .16rem .45rem; border-radius: var(--r); background: hsl(var(--gold)); color: hsl(var(--charcoal)); font-size: .5rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }

  .picker { position: fixed; inset: 0; z-index: 520; display: grid; place-items: center; padding: 1.25rem;
    background: hsl(30 18% 3% / .93); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity var(--t) var(--ease); }
  .picker.is-open { opacity: 1; pointer-events: auto; }
  .picker__box { width: 100%; max-width: 960px; max-height: 88vh; display: flex; flex-direction: column;
    background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: var(--shadow-elevated); }

  .picker__head { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; padding: 1.1rem 1.25rem; border-bottom: 1px solid hsl(var(--border)); }
  .picker__head h3 { font-size: 1.25rem; flex: none; }
  .picker__box { min-width: 0; }
  @media (max-width: 560px) {
    .picker { padding: .75rem; }
    .picker__head { padding: .9rem 1rem; }
    .pickgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pick__b { min-height: 4.25rem; }
    .pick__b b, .pick__b span { overflow-wrap: anywhere; }
    .picker__head h3 { font-size: 1.0625rem; }
    .picker__head .picker__search { order: 3; flex: 1 0 100%; width: 100%; font-size: 1rem; }
    .picker__body { padding: 1rem; }
  }
  .picker__search { flex: 1; min-width: 0; padding: .55rem .9rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--r-pill); color: hsl(var(--foreground)); font-size: .8125rem; }

  .picker__search:focus { outline: none; border-color: hsl(var(--gold) / .6); }
  .picker__search:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 2px; }
  .picker__body { padding: 1.25rem; overflow-y: auto; }

  .locked { display: grid; gap: 2rem; align-items: center; max-width: 900px; margin: 0 auto; }
  @media (min-width: 820px) { .locked { grid-template-columns: 300px 1fr; } }
  .locked__img { position: relative; }
  .locked__img .arch-frame { filter: drop-shadow(0 24px 40px hsl(0 0% 0% / .7)); }
  .locked__img img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
  .locked__seal { position: absolute; top: -10px; left: -10px; z-index: 2; display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .6rem; border-radius: var(--r-pill); background: hsl(var(--gold)); color: hsl(var(--charcoal));
    font-size: .5625rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; box-shadow: var(--shadow-soft); }
  .locked h3 { font-size: clamp(1.625rem, 3vw, 2.25rem); font-weight: 300; }
  .locked__pills { margin-top: .7rem; display: flex; flex-wrap: wrap; gap: .35rem; }
  .locked__hist { margin-top: 1rem; font-size: .875rem; line-height: 1.8; color: hsl(var(--muted-foreground)); }
  .locked__why { margin-top: .6rem; font-family: var(--font-display); font-style: italic; font-size: .9375rem; line-height: 1.6; color: hsl(var(--foreground) / .9); }
  .locked__about { margin-top: .75rem; }
  .locked__about summary { min-height: 44px; padding: .65rem 0; cursor: pointer; color: hsl(var(--gold)); font-size: .8125rem; }
  .locked__about summary:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 3px; }
  .locked__enlarge { display: block; width: 100%; padding: 0; background: none; border: 0; cursor: zoom-in; }
  .locked__caption { margin-top: .4rem; font-size: .6875rem; color: hsl(var(--muted-foreground)); }

  @media (min-width: 1000px) {
    #pane2-locked .locked { grid-template-columns: minmax(0, 1fr); }
    #pane2-locked .locked__img { display: none; }
  }
  @media (max-width: 999px) {
    .view.is-step2 .stage.is-selected-look { display: none; }
    #pane2-locked .locked { display: flex; flex-wrap: wrap; gap: 1rem; align-items: start; }
    #pane2-locked .locked__img { flex: 0 0 104px; }
    #pane2-locked .locked > div:not(.locked__img) { flex: 1 1 8rem; min-width: 0; }
    #pane2-locked .locked h3 { font-size: 1.625rem; }
    #pane2-locked .locked__why { font-size: .875rem; line-height: 1.5; }
    #pane2-locked .locked__seal { top: -8px; left: -4px; }
  }
  .locked__row { margin-top: 1.75rem; display: flex; gap: .6rem; flex-wrap: wrap; }

  .placechip { display: inline-flex; align-items: center; gap: .5rem; flex: none; padding: .3rem .4rem .3rem .55rem;
    border: 1px solid hsl(var(--gold) / .35); border-radius: var(--r-pill); background: hsl(var(--gold) / .07); }
  .placechip__ico { width: 22px; height: 22px; flex: none; }
  .placechip__ico svg { width: 100%; height: 100%; }
  .placechip__n { font-size: .6875rem; letter-spacing: .06em; color: hsl(var(--gold)); white-space: nowrap; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; }
  .placechip__go { padding: .3rem .6rem; border: 1px solid hsl(var(--gold) / .4); border-radius: var(--r-pill); background: none;
    color: hsl(var(--gold)); font-size: .5625rem; letter-spacing: .16em; text-transform: uppercase; transition: all var(--t) var(--ease); }
  .placechip__go:hover { background: hsl(var(--gold)); color: hsl(var(--charcoal)); }
  @media (max-width: 720px) { .placechip__n { max-width: 12ch; } }

  .acct { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .35rem .3rem .7rem;
    border: 1px solid hsl(var(--gold) / .35); border-radius: var(--r-pill); background: hsl(var(--gold) / .07); }
  .acct__bal { font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--gold)); white-space: nowrap; }
  .acct__btn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: hsl(var(--gold)); color: hsl(var(--charcoal)); font-family: var(--font-display); font-size: .75rem; font-weight: 600; border: none; }
  .acct__btn img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
  .acct__btn:hover { background: hsl(var(--gold-light)); }
  .hero--sun .acct { border-color: hsl(18 45% 46% / .5); background: hsl(38 55% 96% / .5); }

  .sheet:not(.is-open), .picker:not(.is-open), .cam:not(.is-open) { visibility: hidden; }
  .sheet, .picker, .cam { transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease); }

  .sheet { position: fixed; inset: 0; z-index: 540; display: grid; place-items: center; padding: 1.25rem;
    background: hsl(30 18% 3% / .93); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity var(--t) var(--ease); }
  .sheet.is-open { opacity: 1; pointer-events: auto; }
  dialog.sheet { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; color: inherit; }
  dialog.sheet::backdrop { background: transparent; }
  .sheet__box { width: 100%; max-width: 430px; max-height: 90vh; overflow-y: auto; padding: 2rem;
    background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: var(--shadow-elevated); }
  .sheet__box--wide { max-width: 760px; }
  .sheet h3 { font-size: 1.625rem; }
  .sheet__head { position: sticky; top: -2rem; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .5rem; margin-top: -.5rem; background: hsl(var(--card)); }
  .sheet__close { flex: none; width: 44px; height: 44px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground)); border-radius: var(--r); font-size: 1.375rem; }
  .sheet__sub { margin-top: .45rem; font-size: .875rem; line-height: 1.7; color: hsl(var(--muted-foreground)); }
  .sheet__foot { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .55rem; }
  .sheet__alt { margin-top: 1rem; text-align: center; font-size: .75rem; color: hsl(var(--muted-foreground)); }
  .sheet__fine { margin: .85rem 0 0; padding: .6rem .75rem; border-radius: var(--radius);
    border: 1px solid hsl(var(--border)); background: hsl(var(--secondary) / .5);
    font-size: .6875rem; line-height: 1.65; color: hsl(var(--foreground) / .8); }
  .sheet__alt button { background: none; border: none; color: hsl(var(--gold)); text-decoration: underline; text-underline-offset: 2px; font-size: .75rem; }
  .sheet__err { margin-top: .8rem; font-size: .75rem; color: hsl(var(--accent)); }

  .packs { display: grid; gap: .85rem; margin-top: 2rem; }
  @media (min-width: 640px) { .packs { grid-template-columns: repeat(3, 1fr); } }
  .pack { position: relative; padding: 2.1rem 1.15rem 1.35rem; text-align: left; width: 100%; cursor: pointer;
    border: 1px solid hsl(var(--border)); background: hsl(var(--background)); border-radius: var(--radius); transition: all var(--t) var(--ease); }
  .pack:hover { border-color: hsl(var(--gold) / .6); box-shadow: var(--shadow-elevated); }
  .pack.is-best { border-color: hsl(var(--gold)); box-shadow: var(--shadow-gold);
    background: radial-gradient(ellipse 100% 80% at 50% 0%, hsl(var(--gold) / .09), transparent 70%), hsl(var(--background)); }

  .pack span.pack__tag { position: absolute; top: .7rem; left: 1.15rem; padding: .16rem .5rem; border-radius: var(--r);
    background: hsl(var(--gold)); color: hsl(var(--charcoal)); font-size: .5rem; letter-spacing: .16em;
    text-transform: uppercase; font-weight: 700; white-space: nowrap; width: auto; }

  .pack::after { content: "Choose"; display: block; margin-top: .9rem; padding-top: .7rem;
    border-top: 1px solid hsl(var(--border)); font-size: .5625rem; letter-spacing: .2em;
    text-transform: uppercase; color: hsl(var(--gold)); }
  .pack:hover::after { color: hsl(var(--gold-light)); }

  #credits .sheet__foot { align-items: center; }
  #credits-cancel { width: auto; padding-inline: 2rem; }
  .pack b { display: block; font-family: var(--font-display); font-size: 1.75rem; color: hsl(var(--gold)); }
  .pack span { display: block; font-size: .875rem; line-height: 1.5; letter-spacing: .01em; color: hsl(var(--muted-foreground)); }
  .pack em { display: block; margin-top: .7rem; font-style: normal; font-size: 1.5rem; font-family: var(--font-display); }
  .pack small { display: block; margin-top: .4rem; font-size: .8125rem; line-height: 1.5; color: hsl(var(--muted-foreground)); }

  .allowance { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem; border-radius: var(--r-pill);
    border: 1px solid hsl(var(--border)); font-size: .6875rem; color: hsl(var(--muted-foreground)); }
  .allowance b { color: hsl(var(--gold)); font-weight: 500; }

  .studio-tabs { display: flex; gap: .4rem; justify-content: center; margin-bottom: 2.5rem; flex-wrap: wrap; }
  .studio-tabs button { padding: .55rem 1.1rem; border: 1px solid hsl(var(--border)); border-radius: var(--r-pill); background: none;
    color: hsl(var(--muted-foreground)); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; transition: all var(--t) var(--ease); }
  .studio-tabs button.is-on { background: transparent; color: hsl(var(--gold)); border-color: hsl(var(--gold)); }

  .studio-tabs button:not(.is-on):hover {
    color: hsl(var(--foreground)); border-color: hsl(var(--gold) / .45);
  }
  .studio-tabs button:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 2px; }
  .studio-pane { display: none; }
  .studio-pane.is-on { display: block; }

  .balance { text-align: center; margin-bottom: 2rem; }
  .balance__n { font-family: var(--font-display); font-size: 3.25rem; line-height: 1.05;
    color: hsl(var(--gold)); }
  .balance__unit { font-size: .8125rem; letter-spacing: .04em; color: hsl(var(--foreground)); }
  .balance__split { margin-top: .55rem; font-size: .75rem; color: hsl(var(--muted-foreground)); }
  .balance__rule { max-width: 40ch; margin: .75rem auto 0; font-size: .75rem; line-height: 1.7;
    color: hsl(var(--muted-foreground)); }

  .ledger { max-width: 640px; margin: 0 auto; }
  .ledger__row { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem .25rem; border-bottom: 1px solid hsl(var(--border)); font-size: .8125rem; }
  .ledger__row span:first-child { color: hsl(var(--muted-foreground)); }
  .ledger__row b { font-weight: 500; }
  .ledger__row b.plus { color: hsl(158 42% 45%); }
  .ledger__row b.minus { color: hsl(var(--muted-foreground)); }

  [hidden] { display: none !important; }

  .acct { position: relative; }

  .acct__signin { padding: .32rem .8rem; border: 1px solid hsl(var(--gold) / .38); border-radius: var(--r-pill); background: transparent;
    color: hsl(var(--gold)); font-size: .625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    transition: border-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease); }
  .acct__signin:hover { border-color: hsl(var(--gold) / .8); color: hsl(var(--gold-light)); }
  .acct__menu { position: absolute; top: calc(100% + .55rem); right: 0; z-index: 80; min-width: 190px; padding: .45rem;
    background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: var(--shadow-elevated); }
  .acct__who { padding: .5rem .65rem .55rem; font-size: .6875rem; color: hsl(var(--muted-foreground));
    border-bottom: 1px solid hsl(var(--border)); margin-bottom: .3rem; word-break: break-all; }
  .acct__menu a, .acct__menu button { display: block; width: 100%; text-align: left; padding: .5rem .65rem;
    background: none; border: none; border-radius: var(--r); color: hsl(var(--foreground)); font-size: .8125rem; transition: background var(--t-fast) var(--ease); }
  .acct__menu a:hover, .acct__menu button:hover { background: hsl(var(--secondary)); color: hsl(var(--gold)); }
  .acct__menu #acct-out { color: hsl(var(--muted-foreground)); }
  .linky { background: none; border: none; padding: 0; color: hsl(var(--gold)); text-decoration: underline; text-underline-offset: 2px; font-size: inherit; font-family: inherit; }

  .styles { padding-block: 3.25rem 2.25rem; text-align: center; }

  .rail--still { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .rail--still::-webkit-scrollbar { display: none; }

  .rail--still .rail__track { animation: none !important; display: grid;
    grid-auto-flow: column; grid-auto-columns: max-content; gap: 1rem;
    padding-inline: 1.25rem; }
  @media (min-width: 900px) {
    .rail--still .rail__track { gap: 1.15rem;
      padding-inline: max(1.25rem, calc((100vw - 1304px) / 2)); }
  }

  .rail--still { scroll-padding-inline: 1.25rem; }
  @media (min-width: 900px) {
    .rail--still { scroll-padding-inline: max(1.25rem, calc((100vw - 1304px) / 2)); }
  }

  .rail--still .card { width: auto; scroll-snap-align: start; }
  .rail--still .card__veil, .rail--still .card__go { display: none; }

  .rail--still .card img { height: 164px; width: auto; aspect-ratio: 3/4; border-radius: 6px; }

  .rail--still .card { width: max-content; }

  .hero__pick-k { margin: 0 0 .5rem; font-size: .625rem; letter-spacing: .22em;
    text-transform: uppercase; color: hsl(24 26% 23%); }
  .places { display: flex; flex-wrap: wrap; gap: .4rem; }
  .places button { display: inline-flex; align-items: center; min-height: 44px;
    padding: 0 .9rem; border-radius: var(--r-pill);
    border: 1px solid hsl(24 22% 62% / .5); background: hsl(38 45% 96% / .5);
    color: hsl(24 26% 24%); font-size: .625rem; letter-spacing: .1em;
    text-transform: uppercase; white-space: nowrap; line-height: 1;
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
  .places button:hover { border-color: hsl(16 68% 45%); color: hsl(16 68% 34%); }
  .places button:focus-visible { outline: 2px solid hsl(16 68% 42%); outline-offset: 2px; }
  .hero__pitch { margin: 0 0 1.1rem; max-width: 42ch; font-size: .9375rem;
    line-height: 1.7; color: hsl(24 22% 30%); }

  .hero__tour { display: inline-flex; align-items: center; gap: .6rem;
    min-height: 52px; padding: 0 1.25rem; border-radius: var(--r);
    border: 1px solid hsl(18 45% 46% / .55); background: hsl(38 55% 94% / .5);
    color: hsl(16 66% 30%); font-size: .9375rem;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
  .hero__tour:hover { border-color: hsl(16 68% 45%); background: hsl(38 60% 96% / .8); }
  .hero__tour:focus-visible { outline: 2px solid hsl(16 68% 42%); outline-offset: 3px; }
  .hero__pick-row { display: flex; flex-wrap: wrap; gap: .5rem; }
  .pickbtn { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px;
    padding: 0 1.2rem; border-radius: var(--r-pill);
    border: 1px solid hsl(24 22% 62% / .5); background: hsl(38 45% 96% / .5);
    color: hsl(24 26% 22%); font-size: .8125rem;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
  .pickbtn:hover { border-color: hsl(16 68% 45%); }
  .pickbtn--go { background: hsl(24 34% 14%); border-color: hsl(24 34% 14%); color: hsl(38 50% 94%); }
  .pickbtn--go:hover { background: hsl(16 68% 42%); border-color: hsl(16 68% 42%); }
  .pickbtn:focus-visible { outline: 2px solid hsl(16 68% 42%); outline-offset: 3px; }

  .mapwrap__names { margin-top: .5rem; }
  .mapwrap__names .hero__pick-k { color: hsl(38 24% 70%); text-align: center; }
  .mapwrap__names .places { justify-content: center; }
  .mapwrap__names .places button {
    border-color: hsl(38 28% 74% / .3); background: hsl(38 30% 88% / .07);
    color: hsl(38 32% 87%); }
  .mapwrap__names .places button:hover {
    border-color: hsl(42 58% 58%); color: hsl(42 66% 78%); }
  .mapwrap__names .hero__pick-row { justify-content: center; }
  .mapwrap__names .pickbtn {
    border-color: hsl(38 28% 74% / .3); background: hsl(38 30% 88% / .07);
    color: hsl(38 32% 88%); }
  .mapwrap__names .pickbtn--go {
    background: hsl(42 52% 54%); border-color: hsl(42 52% 54%); color: hsl(24 34% 12%); }
  .mapwrap__names .pickbtn--go:hover {
    background: hsl(42 62% 62%); border-color: hsl(42 62% 62%); }

  .styles__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .75rem 1.5rem; margin-top: .4rem; }
  .styles__row { display: flex; gap: .35rem 1.7rem; flex-wrap: wrap; align-items: center; }
  .styles__all { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px;
    font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
    color: hsl(16 66% 30%); white-space: nowrap;
    transition: color var(--t-fast) var(--ease); }
  .styles__all:hover { color: hsl(16 68% 42%); }
  .styles__all:focus-visible { outline: 2px solid hsl(16 68% 42%); outline-offset: 3px; }
  .styles__bar .styles__blurb { margin: 0; }
  @media (max-width: 760px) {
    .styles__bar { justify-content: center; }
    .styles__row { justify-content: center; }
  }

  .styletog { padding: .35rem 0; border: 0; background: none; border-radius: 0;
    font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
    color: hsl(24 26% 30%); position: relative; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color var(--t-fast) var(--ease); }

  .styles__row .styletog + .styletog::before {
    content: "\00B7"; position: absolute; left: -.85rem; top: 50%;
    transform: translateY(-50%); color: hsl(24 20% 58%); letter-spacing: 0; }
  .styletog:hover { color: hsl(16 68% 38%); }
  .styletog.is-on { color: hsl(24 34% 13%); }
  .styletog.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
    height: 2px; background: hsl(16 64% 42%); }

  .styletog small { display: block; margin-top: .15rem; font-size: .5625rem; letter-spacing: .1em; text-transform: none; opacity: 1; font-weight: 400; }

  .styles__blurb { margin: .55rem 0 0; max-width: 78ch; font-size: .8125rem; line-height: 1.6; color: hsl(24 20% 34%); min-height: 1.3rem; }

  .rail { position: relative; overflow: hidden; padding-block: .5rem; }

  .rail::before, .rail::after { content: ""; position: absolute; top: 0; bottom: 0; width: min(90px, 18%); z-index: 3; pointer-events: none; }
  .rail::before { left: 0; background: linear-gradient(90deg, hsl(28 44% 82%), transparent); }
  .rail::after { right: 0; background: linear-gradient(270deg, hsl(18 40% 68%), transparent); }
  .rail__track { display: flex; gap: 1rem; width: max-content; animation: drift-l 44s linear infinite; will-change: transform; }
  .rail--rtl .rail__track { animation-name: drift-r; }
  .rail:hover .rail__track, .rail__track:focus-within { animation-play-state: paused; }
  @keyframes drift-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes drift-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }

  @media (prefers-reduced-motion: reduce) {
    .rail__track, .rail--rtl .rail__track { animation: none; }
    .rail { overflow-x: auto; }

    html, :root { scroll-behavior: auto; }
  }

  .card { position: relative; flex: none; width: 288px; border-radius: var(--r); overflow: hidden; padding: 0;
    background: hsl(30 14% 12%); border: none; cursor: pointer;
    box-shadow: 0 12px 30px -14px hsl(20 40% 20% / .6); transition: box-shadow var(--t-slow) var(--ease); }
  .card:hover { box-shadow: 0 22px 46px -16px hsl(20 40% 18% / .8); }
  .card img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; }
  .card__veil { position: absolute; inset: auto 0 0 0; padding: 3.4rem .95rem 1rem; text-align: left;
    background: linear-gradient(transparent, hsl(24 30% 8% / .55) 30%, hsl(24 30% 6% / .96)); }
  .card__d { display: block; margin-top: .3rem; font-size: .75rem; line-height: 1.55; color: hsl(38 24% 80%); }
  .card__cat { font-size: .5rem; letter-spacing: .2em; text-transform: uppercase; color: hsl(var(--gold)); }
  .card__t { display: block; margin-top: .12rem; font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.2; color: hsl(38 45% 94%); }
  .card__go { position: absolute; top: .6rem; right: .6rem; padding: .22rem .55rem; border-radius: var(--r-pill);
    background: hsl(38 50% 94% / .92); color: hsl(24 34% 16%); font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
    opacity: 0; transform: translateY(-4px); transition: all var(--t) var(--ease); }
  .card:hover .card__go { opacity: 1; transform: none; }
  .rail__empty { text-align: center; padding: 3rem 1rem; color: hsl(24 20% 40%); font-size: .875rem; }

  .whereami { position: absolute; left: 50%; top: 1rem; transform: translateX(-50%); z-index: 12; display: flex; align-items: center; gap: .5rem;
    padding: .45rem .8rem; border-radius: var(--r-pill); background: hsl(var(--background) / .82);
    border: 1px solid hsl(var(--border)); backdrop-filter: blur(10px); }
  @media (max-width: 700px) {

    .whereami { display: none; }
  }
  .whereami svg { width: 15px; height: 15px; color: hsl(var(--gold)); flex: none; }
  .whereami b { font-size: .6875rem; letter-spacing: .1em; color: hsl(38 45% 90%); font-weight: 500; }
  .whereami > span { font-size: .5625rem; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
  .whereami > span::before { content: "·"; margin-right: .45rem; opacity: .5; }
  .whereami b span.long { font-weight: 400; opacity: .8; }
  @media (max-width: 620px) { .whereami b span.long { display: none; } }

  .pad { display: grid;
    grid-template-columns: repeat(3, 26px); grid-template-rows: repeat(3, 26px); gap: 2px; }
  .pad button { display: grid; place-items: center; background: hsl(var(--background) / .88);
    border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); font-size: .6875rem; line-height: 1; padding: 0; }
  .pad button:hover { color: hsl(var(--gold)); border-color: hsl(var(--gold) / .5); }
  .pad button:active { background: hsl(var(--gold)); color: hsl(var(--charcoal)); }
  .pad .up { grid-area: 1/2 } .pad .left { grid-area: 2/1 } .pad .right { grid-area: 2/3 } .pad .down { grid-area: 3/2 }
  .pad .mid { grid-area: 2/2; border-color: transparent; background: none; pointer-events: none; color: hsl(var(--muted-foreground) / .4); font-size: .5rem; }
  @media (max-width: 1080px) { .pad { display: none; } }

  .curator { overflow: hidden; background:
    radial-gradient(circle at 12% 18%, hsl(var(--zellij-green) / .18), transparent 32%),
    hsl(var(--card)); }
  .cur__room { display: grid; max-width: 1000px; margin-inline: auto; align-items: center; border: 1px solid hsl(var(--border));
    background: hsl(var(--background) / .72); box-shadow: var(--shadow-elevated); }
  .cur__visual { position: relative; justify-self: center; width: auto; height: 420px; aspect-ratio: 902 / 1288; margin: 1rem auto; padding: .55rem;
    background: var(--cta-zellij) center / 54px 54px; }
  .cur__img { width: 100%; height: 100%; background: hsl(var(--background)); overflow: hidden; }
  .cur__img .arch-frame { height: 100%; padding: 0; filter: none; clip-path: none; }
  .cur__img .arch-frame > * { clip-path: none; }
  .cur__img img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: hsl(var(--background)); }
  .cur__visual-note { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.4rem; padding: .9rem 1rem;
    border: 1px solid hsl(var(--gold) / .32); background: hsl(var(--background) / .88); backdrop-filter: blur(9px); }
  .cur__visual-note b { display: block; font-family: var(--font-display); font-size: 1.125rem; font-weight: 400; }
  .cur__visual-note span { display: block; margin-top: .2rem; font-size: .6875rem; line-height: 1.55; color: hsl(var(--muted-foreground)); }
  .cur__consult { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 4vw, 3rem); }
  .cur__prompt { margin-bottom: 1.35rem; font-family: var(--font-display); font-size: 1.375rem; line-height: 1.35; color: hsl(var(--foreground)); }
  .cur__tabs { display: flex; gap: .45rem; justify-content: flex-start; margin-bottom: 1.25rem; }
  .cur__tabs button { min-height: 42px; padding: .55rem 1.15rem; border: 1px solid hsl(var(--border)); border-radius: var(--r); background: transparent;
    color: hsl(var(--muted-foreground)); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
    transition: border-color var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease); }
  .cur__tabs button.is-on { background: hsl(var(--gold)); color: hsl(var(--charcoal)); border-color: hsl(var(--gold)); }
  .cur__qs-toolbar { display: none; }
  .cur__qs { display: grid; width: 100%; min-width: 0; grid-template-columns: 1fr 1fr; gap: .55rem; }
  .cur__q { position: relative; min-height: 54px; padding: .75rem 2.75rem .75rem .9rem; border: 1px solid hsl(var(--border)); border-radius: var(--r); background: hsl(var(--card));
    color: hsl(var(--foreground)); font-size: .8125rem; line-height: 1.4; text-align: left;
    transition: border-color var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease); }
  .cur__q::after { content: "\2197"; position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); color: hsl(var(--gold)); }
  .cur__q:hover { border-color: hsl(var(--gold) / .6); background: hsl(var(--secondary)); }
  .cur__q.is-on { background: hsl(var(--gold) / .07); color: hsl(var(--gold)); border-color: hsl(var(--gold)); }

  .cur__answer { width: 100%; min-width: 0; margin-top: 1.6rem; padding-top: 1.35rem; border-top: 1px solid hsl(var(--border)); scroll-margin-top: 104px;
    opacity: 0; transform: translateY(12px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
  .cur__answer.is-in { opacity: 1; transform: none; }
  .cur__a { min-height: 5.55em; font-size: 1rem; line-height: 1.85; color: hsl(var(--foreground) / .92); }
  .cur__row { margin-top: 1.5rem; display: flex; gap: .6rem; flex-wrap: wrap; }
  @media (min-width: 820px) { .cur__room { grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); } }
  @media (max-width: 819px) {
    .curator .section-head { margin-bottom: 1.75rem !important; }
    .cur__room { max-width: 540px; grid-template-columns: minmax(0, 1fr); }
    .cur__visual { width: auto; height: min(82vw, 320px); margin: .8rem auto 0; }
    .cur__visual-note { left: 1rem; right: 1rem; bottom: 1rem; padding: .65rem .75rem; }
    .cur__visual-note b { font-size: 1rem; }
    .cur__visual-note span { font-size: .625rem; }
    .cur__consult { padding: 1.4rem 1.15rem 1.6rem; }
    .cur__prompt { font-size: 1.25rem; }
    .cur__qs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: -.25rem 0 .7rem; }
    .cur__qs-count { margin: 0; font-size: .625rem; letter-spacing: .17em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
    .cur__qs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; gap: .7rem;
      overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
      scroll-padding-inline: 0; -webkit-overflow-scrolling: touch; }
    .cur__qs::-webkit-scrollbar { display: none; }
    .cur__qs:focus-visible { outline: 2px solid hsl(var(--gold) / .7); outline-offset: 4px; }
    .cur__q { min-height: 64px; scroll-snap-align: center; }
    .cur__a { min-height: 7.4em; }
    .cur__row { flex-direction: column; align-items: stretch; }
    .cur__row .btn-atlas { width: 100%; }
    .cur__row .btn-quiet { justify-content: center; }
  }

  .voices { display: grid; gap: 1.25rem; }
  @media (min-width: 880px) { .voices { grid-template-columns: repeat(3, 1fr); } }
  .voice { display: flex; flex-direction: column; padding: 1.75rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
  .voice__stars { color: hsl(var(--gold)); font-size: .8125rem; letter-spacing: .12em; }
  .voice__q { margin-top: .9rem; font-family: var(--font-display); font-size: 1.125rem; font-style: italic; line-height: 1.6; color: hsl(var(--foreground) / .95); }
  .voice__photo { margin-top: 1.1rem; aspect-ratio: 4/3; overflow: hidden; border: 1px solid hsl(var(--border)); }
  .voice__photo img { width: 100%; height: 100%; object-fit: cover; }
  .voice__who { margin-top: auto; padding-top: 1.1rem; font-size: .75rem; color: hsl(var(--muted-foreground)); }
  .voice__who b { display: block; color: hsl(var(--foreground)); font-weight: 500; font-size: .8125rem; }
  .voice__rel { display: inline-block; margin-top: .45rem; padding: .12rem .45rem; border: 1px solid hsl(var(--border));
    border-radius: var(--r); font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
  .proofbar { display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.5rem; }
  .proofbar div { text-align: center; }
  .proofbar b { display: block; font-family: var(--font-display); font-size: 2.25rem; color: hsl(var(--gold)); line-height: 1; }
  .proofbar span { display: block; margin-top: .3rem; font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }

  .studio { min-height: 100vh; padding-top: 72px;
    background:
      radial-gradient(ellipse 80% 50% at 50% 0%, hsl(28 26% 14%), transparent 60%),
      linear-gradient(180deg, hsl(30 16% 7%), hsl(30 18% 5%) 50%); }
  .studio__grid { display: grid; gap: 2.5rem; padding-top: 2.75rem; padding-bottom: 5rem; align-items: start; }
  @media (min-width: 1000px) { .studio__grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 4rem; } }

  .stage { align-self: stretch; }

  .studio__grid > * { min-width: 0; }
  .deck { min-width: 0; }
  .stage__inner { position: sticky; top: 148px; }
  @media (max-width: 999px) { .stage__inner { position: static; } .stage { max-width: 380px; margin: 0 auto; } }

  @media (max-width: 760px) {

    .view.is-step1 .stage { display: none; }
  }

  @media (max-width: 760px) {

    .view.is-step2 .stage { max-width: 148px; margin: 0 auto .25rem; align-self: start; }
    .view.is-step2 .stage__inner { position: static; }
    .view.is-step2 .wall { padding: .4rem; min-height: 0; }
    .view.is-step2 .wall__art { box-shadow: 0 10px 22px -12px hsl(0 0% 0% / .9); }
    .view.is-step2 .stage__cap { font-size: .6875rem; margin-top: .45rem; }
    .view.is-step2 .wall__mark, .view.is-step2 .wall__tag { display: none; }

    .view.is-step2 .stage.is-idle, .view.is-step2 .stage.is-empty { display: none; }
  }

  .stage__frame { position: relative; }

  .wall { position: relative; display: grid; place-items: center; padding: 2.25rem;
    border-radius: var(--r); overflow: hidden; min-height: 300px;
    background:
      radial-gradient(ellipse 60% 45% at 50% 12%, hsl(32 26% 26%), transparent 70%),
      linear-gradient(165deg, hsl(30 16% 17%), hsl(30 18% 11%));
    box-shadow: inset 0 1px 0 hsl(38 30% 60% / .1); }
  .wall__art { position: relative; box-sizing: content-box; width: 78%; transition: width var(--t-slow) var(--ease); }

  .wall__art.is-hung { padding: 5.5%; background: #f6f4ef;
    border: 11px solid #17120e;
    box-shadow: 0 1px 0 hsl(38 30% 70% / .25) inset, 0 22px 44px -18px hsl(0 0% 0% / .75); }
  .wall__art.is-hung img { box-shadow: 0 0 0 1px hsl(24 20% 20% / .18); }
  .wall__art img { display: block; width: 100%; aspect-ratio: auto; object-fit: contain;
    box-shadow: 0 0 0 1px hsl(var(--gold) / .16);
    transition: filter 1.2s var(--ease), opacity 1.2s var(--ease), transform 1.2s var(--ease); }

  .stage.is-working .wall__art img { filter: blur(20px) saturate(.5); opacity: .5; transform: scale(1.05); }

  .stage__zoom { position: absolute; right: .55rem; bottom: .55rem; z-index: 4;
    display: none; min-height: 44px; padding: .55rem .75rem; border: 1px solid hsl(var(--gold) / .55);
    border-radius: var(--r); background: hsl(var(--background) / .9); color: hsl(var(--foreground));
    font: 600 .6875rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
    backdrop-filter: blur(8px); cursor: pointer; }
  .stage.is-proof .stage__zoom { display: inline-flex; align-items: center; gap: .4rem; }
  .stage__zoom:hover { background: hsl(var(--gold)); color: hsl(var(--charcoal)); }

  .proof-viewer { width: min(96vw, 980px); max-width: none; height: min(94dvh, 980px);
    max-height: none; padding: 0; border: 1px solid hsl(var(--gold) / .4); border-radius: var(--r);
    background: hsl(var(--background)); color: hsl(var(--foreground)); overflow: hidden; }
  .proof-viewer::backdrop { background: hsl(var(--background) / .94); backdrop-filter: blur(10px); }
  .proof-viewer[open] { display:grid; grid-template-rows:auto minmax(0,1fr); }
  .proof-viewer__bar { min-height: 58px; padding: .45rem .55rem .45rem .9rem; display: grid; grid-template-columns:minmax(0,1fr) auto;
    align-items: center; justify-content: space-between; gap: .75rem; border-bottom: 1px solid hsl(var(--border)); }
  .proof-viewer__tabs { display: flex; flex-wrap:wrap; gap: .35rem; min-width:0; }
  .proof-viewer__tabs button, .proof-viewer__close { min-height: 44px; padding: .55rem .8rem;
    border: 1px solid hsl(var(--border)); border-radius: var(--r); background: transparent;
    color: hsl(var(--muted-foreground)); font: 600 .875rem/1.4 var(--font-body); cursor: pointer; }
  .proof-viewer__tabs button[aria-pressed="true"] { border-color: hsl(var(--gold)); color: hsl(var(--gold)); }
  .proof-viewer__mode { display:none; width:100%; min-width:0; min-height:44px; padding:.55rem .65rem; border:1px solid hsl(var(--border)); border-radius:var(--r); background:hsl(var(--background)); color:hsl(var(--foreground)); font:600 .875rem/1.4 var(--font-body); }
  .proof-viewer.is-compact .proof-viewer__bar { padding:8px; gap:8px; }
  .proof-viewer.is-compact .proof-viewer__mode { display:block; padding-left:8px; padding-right:8px; }
  .proof-viewer.is-compact .proof-viewer__tabs > button:not(#proof-view-zoom) { display:none; }
  .proof-viewer__close { width: 44px; padding: 0; font-size: 1.25rem; }
  .proof-viewer__canvas { min-height:0; min-width:0; overflow: auto; display: grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); place-items: center;
    overscroll-behavior: contain; touch-action: pinch-zoom; }
  .proof-viewer__canvas img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%;
    object-fit: contain; touch-action: pinch-zoom; }
  .proof-viewer.is-zoomed .proof-viewer__canvas { display:block; }
  .proof-viewer.is-zoomed .proof-viewer__canvas img { max-width:none; max-height:none; margin:0 auto; }
  .proof-viewer__canvas[hidden], .proof-viewer__comparison[hidden] { display:none; }
  .proof-viewer__comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); gap:.75rem; min-height:0; min-width:0; padding:.5rem; }
  .proof-viewer__comparison figure { display:grid; grid-template-rows:auto minmax(0,1fr); min-width:0; min-height:0; margin:0; }
  .proof-viewer__comparison figcaption { padding:.35rem .25rem; font:.875rem/1.5 var(--font-body); color:hsl(var(--muted-foreground)); }
  .proof-viewer__detail { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); place-items:center; min-height:0; min-width:0; overflow:auto; overscroll-behavior:contain; }
  .proof-viewer__detail img { display:block; max-width:100%; max-height:100%; object-fit:contain; }
  .proof-viewer.is-zoomed .proof-viewer__detail { display:block; }
  .proof-viewer.is-zoomed .proof-viewer__detail img { max-width:none; max-height:none; margin:0 auto; }
  .proof-viewer__detail:focus-visible { outline:2px solid hsl(var(--gold-light)); outline-offset:-3px; }
  @media (max-width:600px) { .proof-viewer__comparison { grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(2,minmax(0,1fr)); gap:.4rem; } }
  .proof-viewer__canvas:focus-visible { outline:2px solid hsl(var(--gold-light)); outline-offset:-3px; }

  .wall__tag { position: absolute; top: .7rem; left: .7rem; z-index: 2;
    padding: .28rem .6rem; border-radius: var(--r);
    background: hsl(30 18% 8% / .78); backdrop-filter: blur(6px);
    border: 1px solid hsl(38 30% 70% / .28);
    font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase;
    color: hsl(38 34% 82% / .9); }
  .stage.is-example .wall__art img { opacity: .96; }

  .wall__art { padding: 0; border-style: solid; border-width: 0; border-color: transparent;
    box-shadow: 0 26px 50px -18px hsl(0 0% 0% / .85); }
  .stage.is-framed .wall__art { border-width: 13px; }
  .stage.is-framed .wall__art { max-width: calc(100% - 26px); }
  .stage.is-framed .wall__art::after { content: ""; position: absolute; inset: 0;
    box-shadow: inset 0 0 0 1px hsl(0 0% 0% / .35); pointer-events: none; }
  .stage.is-mounted .wall__art img { border: 32px solid hsl(36 24% 92%); }
  .stage.is-empty .wall { min-height: 340px; }
  .stage__ph { text-align: center; color: hsl(var(--muted-foreground) / .6); font-size: .8125rem; line-height: 1.7; padding: 2rem 1rem; }

  .stage__fail { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; gap: .8rem;
    align-content: center; padding: 1.25rem; text-align: center;
    background: hsl(30 16% 9% / .96); border-radius: var(--r); }
  .stage__fail p { margin: 0; font-size: .8125rem; line-height: 1.6; color: hsl(var(--foreground)); }
  .stage.is-broken .wall__art { opacity: .12; }

  .stage__cap { margin-top: 1.15rem; text-align: center; font-size: .6875rem;
    letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }

  .stage__bar { margin-top: 1.25rem; }
  .stage__prog { height: 2px; background: hsl(var(--border)); overflow: hidden; }
  .stage__prog i { display: block; height: 100%; width: 0; background: hsl(var(--gold)); transition: width var(--t-slow) linear; }

  .tally { margin-top: 1.4rem; padding: 1.1rem 1.15rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card) / .6); }
  .tally__rows .rev-line { display: flex; justify-content: space-between; gap: 1rem; padding-block: .45rem; font-size: .8125rem; }
  .tally__rows .rev-line + .rev-line { border-top: 1px solid hsl(var(--border)); }
  .tally__rows .rev-line span:first-child { color: hsl(var(--muted-foreground)); }
  .tally__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid hsl(var(--gold) / .3); }
  .tally__total span:first-child { font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
  .tally__total span:last-child { font-family: var(--font-display); font-size: 1.75rem; color: hsl(var(--gold)); }

  .deck__k { font-size: .625rem; letter-spacing: .24em; text-transform: uppercase; color: hsl(var(--gold)); }
  .deck__h { margin-top: .35rem; font-family:var(--font-body); font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing:-.015em; }
  .deck__h em { font-style:normal; }
  @media(min-width:1000px) { .deck__h { font-size:2rem; } }
  .deck__p { margin-top: .8rem; max-width: 56ch; font-size: .9375rem; line-height: 1.8; color: hsl(var(--muted-foreground)); }
  .deck__note { margin-top: .6rem; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--gold) / .75); }
  .deck__act { margin-top: 2rem; display: flex; gap: .65rem; flex-wrap: wrap; }

  .fixbox { margin-top: 1.75rem; padding: 1rem 1.1rem 1.1rem; border: 1px solid hsl(var(--border));
    background: hsl(var(--card) / .55); border-radius: var(--radius); max-width: 56ch; }
  .fixbox__lab { display: block; font-size: .8125rem; color: hsl(var(--foreground)); }
  .fixbox__sub { display: block; margin-top: .3rem; font-size: .75rem; line-height: 1.65;
    color: hsl(var(--muted-foreground)); }
  .fixbox textarea { width: 100%; margin-top: .6rem; padding: .65rem .8rem; resize: vertical; min-height: 62px;
    background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius);
    color: hsl(var(--foreground)); font-size: .8125rem; line-height: 1.6; font-family: var(--font-body); }
  .fixbox textarea:focus { outline: none; border-color: hsl(var(--gold) / .6); }
  .fixbox textarea:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 2px; }
  .fixbox__count { margin-top: .3rem; text-align: right; font-size: .625rem; letter-spacing: .08em;
    color: hsl(var(--muted-foreground) / .8); }
  .curator-rescue { margin-top: .8rem; padding-top: .75rem; border-top: 1px solid hsl(var(--border));
    font-size: .75rem; line-height: 1.65; color: hsl(var(--muted-foreground)); }
  .curator-rescue a { color: hsl(var(--gold)); text-underline-offset: .2em; }
  .deck .drop, .deck .petcard, .deck .guides, .deck .fmt-grid, .deck .opts { max-width: none; margin-left: 0; margin-right: 0; }

  .deck .drop { padding: 2rem 1.5rem; border-color: hsl(var(--gold) / .45);
    background:
      radial-gradient(ellipse 70% 100% at 50% 0%, hsl(var(--gold) / .07), transparent 70%),
      hsl(var(--card) / .5); }
  .deck .drop__icon { width: 34px; height: 34px; margin-bottom: .7rem; }
  .deck .drop h3 { font-size: 1.125rem; }
  .deck .drop { margin-top: 1.75rem; }
  .deck .petcard { margin-top: 1.75rem; }
  .deck .guides { margin-top: 1.5rem; }
  .deck #flow-map-slot .map { height: min(56vh, 520px); min-height: 380px; border-radius: var(--r); overflow: hidden; margin-top: 1.5rem; }
  .deck #pane2-picker, .deck #pane2-locked { margin-top: 1.75rem; }
  .deck .locked { grid-template-columns: 1fr; gap: 1.5rem; }
  @media (min-width: 700px) { .deck .locked { grid-template-columns: 190px 1fr; } }
  .deck .fmt-grid { margin-top: 1.5rem; grid-template-columns: 1fr; }
  @media (min-width: 640px) { .deck .fmt-grid { grid-template-columns: repeat(2, 1fr); } }
  .opts__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    border-top: 1px solid hsl(var(--border)); padding-top: 1.1rem; }
  .opts__sum #fmt-total { font-family: var(--font-display); font-size: 1.75rem; color: hsl(var(--gold)); }

  .deliver { display: block; margin-top: 1.25rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card) / .5); }
  .deliver__h { display: flex; align-items: center; gap: .7rem; margin: 0; padding: 1.05rem 1.25rem .2rem;
    font-family: var(--font-sans); font-size: .6875rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
  .deliver__h em { font-style: normal; font-size: .625rem; letter-spacing: .14em; padding: .16rem .45rem; border-radius: var(--r-pill);
    color: hsl(var(--gold)); border: 1px solid hsl(var(--gold) / .45); background: hsl(var(--gold) / .1); }
  .deliver__body { padding-top: .9rem; }

  .giftbox { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid hsl(var(--border)); }
  .giftbox__on, .giftbox__hide { display: flex; align-items: center; gap: .6rem; cursor: pointer;
    font-size: .8125rem; color: hsl(var(--foreground)); }

  .giftbox__on input, .giftbox__hide input {
    appearance: none; -webkit-appearance: none; margin: 0;
    width: 15px; height: 15px; flex: 0 0 15px; border: 1px solid hsl(var(--border));
    background: hsl(var(--background)); cursor: pointer; position: relative;
  }
  .giftbox__on input:checked, .giftbox__hide input:checked { border-color: hsl(var(--gold) / .7); }
  .giftbox__on input:checked::after, .giftbox__hide input:checked::after {
    content: ""; position: absolute; left: 4px; top: 0;
    width: 5px; height: 10px; border: solid hsl(var(--gold)); border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .giftbox__on input:focus-visible, .giftbox__hide input:focus-visible {
    outline: 2px solid hsl(var(--gold)); outline-offset: 2px;
  }
  .giftbox__hide { margin-top: .9rem; font-size: .75rem; color: hsl(var(--muted-foreground)); }
  .giftbox__body { margin-top: .9rem; }
  .giftbox__note { margin: 0 0 .9rem; font-size: .75rem; line-height: 1.7; color: hsl(var(--muted-foreground)); }
  .field__count { float: right; font-size: .625rem; letter-spacing: .08em; color: hsl(var(--muted-foreground) / .8); }
  .giftcard { position: relative; margin-top: .9rem; padding: 1.15rem 1.25rem 1.6rem; min-height: 108px;
    border: 1px solid hsl(var(--gold) / .3); border-radius: var(--r);
    background: linear-gradient(160deg, hsl(38 30% 96%), hsl(36 24% 91%)); color: hsl(28 25% 18%); }
  .giftcard__to, .giftcard__from { margin: 0; font-family: var(--font-serif); font-size: .9375rem; }
  .giftcard__from { text-align: right; }
  .giftcard__msg { margin: .5rem 0 .7rem; font-family: var(--font-serif); font-size: 1rem; line-height: 1.6; white-space: pre-wrap; }
  .giftcard__mark { position: absolute; left: 1.25rem; bottom: .6rem; font-size: .5rem; letter-spacing: .3em; color: hsl(28 20% 45%); }

  .needs { margin: 0 0 .8rem; padding: .7rem .85rem; border-radius: var(--radius);
    border: 1px solid hsl(var(--gold) / .35); background: hsl(var(--gold) / .07);
    font-size: .8125rem; line-height: 1.6; color: hsl(var(--foreground)); }
  .needs b { color: hsl(var(--gold)); font-weight: 500; }

  .deliver summary { display: flex; align-items: center; justify-content: space-between; padding: 1.05rem 1.25rem; cursor: pointer; list-style: none;
    font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: hsl(var(--foreground)); }
  .deliver summary::-webkit-details-marker { display: none; }
  .deliver summary i { width: 9px; height: 9px; border-right: 1.5px solid hsl(var(--gold)); border-bottom: 1.5px solid hsl(var(--gold));
    transform: rotate(45deg); transition: transform var(--t) var(--ease); }
  .deliver[open] summary i { transform: rotate(-135deg); }
  .deliver__body { padding: 0 1.25rem 1.35rem; }
  .payrow { margin-top: 1.5rem; }
  .payrow .btn-atlas { width: 100%; }
  .payrow .trust { margin-top: .9rem; }

  .map--compact .index,
  .map--compact .whereami,
  .map--compact .narrative { display: none !important; }
  .map--compact .search { width: 236px; top: .75rem; left: .75rem; padding: .45rem .8rem; }
  .map--compact .search input { font-size: .75rem; }
  .map--compact .mapctl { right: .75rem; bottom: .75rem; display: flex; }
  .map--compact .mapctl .minimap, .map--compact .mapctl .pad { display: none; }
  .map--compact .mapexit { top: .75rem; right: .75rem; padding: .4rem .7rem; font-size: .5rem; }
  .map--compact .detail { width: 296px; left: .75rem; bottom: .75rem; max-height: calc(100% - 1.5rem); }

  .map--compact .detail__scene { aspect-ratio: 1/1; }
  .map--compact .attrib { bottom: .2rem; font-size: .4375rem; }
  .map--compact .pin__name { font-size: .625rem; padding: .12rem .4rem; }
  .map--compact .pin__medal { width: 44px; height: 44px; }
  .map--compact .veil__inner { padding: 1rem 1.5rem; }
  .map--compact .veil h3 { font-size: 1.125rem; }

  .mapctl { position: absolute; right: 1rem; bottom: 1rem; z-index: 12;
    display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; }
  @media (max-width: 1080px) { .mapctl { display: none; } }

  .site-header__inner { height: 72px; }
  .wordmark small { display: block; font-family: var(--font-body); font-size: .5rem; letter-spacing: .28em; color: hsl(var(--muted-foreground)); margin-top: .1rem; }

  #view-landing section[id], #view-landing div[id] { scroll-margin-top: 84px; }

  .site-header { z-index: 80; }
  .site-header__inner { gap: 1rem; }
  .site-header__inner .acct { margin-left: auto; }

  .menubtn { display: inline-flex; align-items: center; gap: .6rem; flex: none;
    padding: .55rem .9rem; border: 1px solid hsl(var(--border));
    background: hsl(var(--card) / .5); border-radius: var(--radius);
    color: hsl(var(--foreground)); transition: border-color var(--t) var(--ease), background var(--t) var(--ease); }
  .menubtn:hover { border-color: hsl(var(--gold) / .55); background: hsl(var(--gold) / .06); }
  .menubtn__label { font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; }
  .menubtn__bars { display: grid; gap: 4px; width: 15px; }
  .menubtn__bars i { display: block; height: 1px; background: hsl(var(--gold));
    transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); }
  .menubtn[aria-expanded="true"] .menubtn__bars i:first-child { transform: translateY(2.5px) rotate(45deg); }
  .menubtn[aria-expanded="true"] .menubtn__bars i:last-child { transform: translateY(-2.5px) rotate(-45deg); }
  @media (max-width: 560px) { .menubtn__label { display: none; } .menubtn { padding: .55rem .7rem; } }

  @media (max-width: 420px) {
    .site-header__inner { gap: .5rem; }
    .acct__bal { display: none; }
    .acct { padding: .25rem .25rem .25rem .3rem; }
    .acct__signin { padding: .3rem .6rem; font-size: .625rem; }

    .wordmark small { display: none; }
    .wordmark { font-size: .9375rem; }
  }

  @media (max-width: 560px) {
    .acct { padding: .3rem; border: 0; background: none; }
    .acct__bal { display: none; }
    .acct__signin { white-space: nowrap; }
  }

  .sitemenu { position: fixed; inset: 0; z-index: 70; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: hsl(var(--foreground)); }
  .sitemenu::backdrop { background: transparent; }
  .sitemenu__bar { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--background)); }
  .sitemenu__bar p { margin: 0; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--gold)); }
  .sitemenu__close { flex-shrink: 0; min-width: 44px; min-height: 44px; padding: .5rem 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--r); background: hsl(var(--card)); color: hsl(var(--foreground)); }
  .sitemenu::before { content: ""; position: absolute; inset: 0;
    background: hsl(24 18% 3% / .74); backdrop-filter: blur(8px);
    opacity: 0; transition: opacity var(--t) var(--ease); }
  .sitemenu.is-open::before { opacity: 1; }

  .sitemenu__sheet { position: absolute; inset: 0; padding-top: 77px; overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: 5rem;
    background: linear-gradient(180deg, hsl(30 16% 8%), hsl(30 18% 5%));
    border-bottom: 1px solid hsl(var(--border));
    box-shadow: 0 30px 70px -30px hsl(0 0% 0% / .9);
    transform: translateY(-14px); opacity: 0;
    transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); }
  .sitemenu.is-open .sitemenu__sheet { transform: none; opacity: 1; }

  .sitemenu__inner { display: grid; gap: 2.5rem; padding-block: 1.5rem max(3rem, env(safe-area-inset-bottom)); }
  @media (min-width: 900px) { .sitemenu__inner { grid-template-columns: minmax(0,1fr) minmax(0,300px); gap: 4rem; align-items: start; } }

  .sitemenu__cols { display: grid; gap: 2rem; }
  @media (min-width: 620px) { .sitemenu__cols { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

  .menugroup__k { font-size: .5625rem; letter-spacing: .24em; text-transform: uppercase;
    color: hsl(var(--gold)); padding-bottom: .7rem; margin-bottom: .5rem;
    border-bottom: 1px solid hsl(var(--border)); }
  .menugroup a, .menulink { display: block; width: 100%; min-height: 44px; scroll-margin-block: 5rem 1rem; text-align: left;
    padding: .5rem 0; font-family: var(--font-display); font-size: 1.25rem;
    color: hsl(var(--foreground)); background: none; border: 0;
    transition: color var(--t) var(--ease), transform var(--t) var(--ease); }
  .menugroup a:hover, .menulink:hover { color: hsl(var(--gold)); }
  .menugroup__note { margin-top: .7rem; font-size: .6875rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }

  .sitemenu__cta { padding: 1.5rem; border: 1px solid hsl(var(--gold) / .28); border-radius: var(--radius);
    background: radial-gradient(ellipse 90% 100% at 50% 0%, hsl(var(--gold) / .09), transparent 70%), hsl(var(--card) / .55); }
  .sitemenu__cta .btn-atlas { width: 100%; }
  .sitemenu__cta p { margin-top: .8rem; font-size: .6875rem; line-height: 1.6; text-align: center; color: hsl(var(--muted-foreground)); }

  .hero { position: relative; overflow: hidden; padding-block: 8rem 4.5rem; }
  .hero__bg { position: absolute; inset: 0; background:
      radial-gradient(ellipse 55% 60% at 72% 45%, hsl(var(--gold) / .09), transparent 68%),
      linear-gradient(140deg, hsl(30 18% 8%), hsl(var(--background)) 55%); }

  .hero { display: flex; flex-direction: column; }
  .hero__grid { order: 1; }

  .hero > #styles.section--plaster { background: none; }

  .hero .styles { padding-block: .35rem .5rem; }

  .hero > #styles.section--plaster {
    --gold-lit: 42 62% 66%;
    --ink: 38 30% 88%;
    --ink-soft: 38 20% 76%;
  }

  .hero > #styles.section--plaster::after { content: none; }

  .hero__band { order: 2; }
  .hero > #styles { order: 3; margin-top: 2.25rem; }
  .hero__grid { position: relative; z-index: 2; display: block; }
  .hero__say { max-width: 52rem; margin: 0 auto; text-align: center; }

  .hero .heading-display { text-wrap: balance; font-size: clamp(2.5rem, 4.8vw, 4rem); line-height: 1; }

  .hero__say .lede { margin: .8rem auto 0; max-width: 66ch; font-size: 1.0625rem; }

  .hero__band { position: relative; z-index: 2; width: 100%; max-width: 660px;
    margin: 1.5rem auto 0; display: block; }

  .hero__pick { display: none; }
  .hero__act .hero__price { margin-top: 1rem; }

  [data-prints-only][hidden], [data-prints-closed-only][hidden] { display: none !important; }

  .hero__offer { margin-top: .85rem; text-align: center; }
  .hero__act .hero__offer .hero__price { margin-top: 0; font-size: 1rem; line-height: 1.5; }
  .hero__avail { margin-top: .25rem; font-size: .875rem; line-height: 1.5; }
  .hero--sun .hero__avail { color: hsl(var(--ink-soft)); }
  .p3-fix { margin-top: .9rem; }
  .p3-fix[hidden] { display: none; }
  .p3-fix .btn-quiet { min-height: 44px; font-size: .9375rem; color: hsl(var(--gold)); }
  .p3-fix__note { margin-top: .2rem; font-size: .8125rem; line-height: 1.5; color: hsl(var(--muted-foreground)); }
  .format__closed { margin: .9rem 0 .2rem; font-size: 1rem; font-weight: 500; color: hsl(var(--muted-foreground)); }

  @media (max-width: 700px) {
    .hero { padding-block: 5.5rem 2.75rem; }
    .hero__act { margin-top: 1.15rem; }
    .hero__grid { gap: 1.9rem; }
    .hero .heading-display { font-size: clamp(2.625rem, 13vw, 3.375rem); line-height: 1.04; }
    .lede__more { display: none; }

    .hero__price { margin-top: .7rem; font-size: .8125rem; line-height: 1.5; }
    .hero__say .lede { margin-top: .7rem; }
  }
  .hero h1 { margin-top: .9rem; }
  .hero .lede { margin-top: 1.5rem; font-size: 1.0625rem; }
  .hero__cta { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .75rem; }
  .hero__trust { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .6875rem; letter-spacing: .08em; color: hsl(var(--muted-foreground)); }
  .hero__trust span { display: inline-flex; align-items: center; gap: .4rem; }
  .hero__trust span::before { content: "✓"; color: hsl(var(--gold)); }

  #view-landing > .zellij-band { display: none; }

  .fan { position: relative; height: 440px; }
  .fan figure { position: absolute; width: 46%; aspect-ratio: 3/4; overflow: hidden; border: 1px solid hsl(var(--gold) / .2); box-shadow: 0 20px 50px -18px hsl(0 0% 0% / .85); background: hsl(var(--card)); }
  .fan img { width: 100%; height: 100%; object-fit: cover; }
  .fan figure:nth-child(1) { left: 0;   top: 16%; transform: rotate(-8deg); z-index: 1; }
  .fan figure:nth-child(2) { left: 26%; top: 0;   width: 50%; transform: none; z-index: 3; }
  .fan figure:nth-child(3) { left: 54%; top: 18%; transform: rotate(9deg);  z-index: 2; }
  @media (max-width: 939px) { .fan { height: 330px; } }

  .mapwrap { position: relative; border-block: 1px solid hsl(var(--border)); background: hsl(30 18% 4%); }
  .mapwrap__head { position: relative; z-index: 3; padding-block: 3.5rem 0; text-align: center; }
  .map { position: relative; height: min(84vh, 860px); min-height: 520px; overflow: hidden; }
  .map canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
  .map.is-live canvas { cursor: grab; touch-action: none; }
  .map.is-live canvas.dragging { cursor: grabbing; }

  .maphud { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
  .maphud > * { pointer-events: auto; }
  #labels { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }

  .veil { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center;
    background:
      radial-gradient(ellipse 62% 52% at 50% 52%, hsl(30 18% 4% / .06), hsl(30 18% 4% / .40) 78%),
      linear-gradient(180deg, hsl(30 18% 4% / .30), transparent 22%, transparent 74%, hsl(30 18% 4% / .34));
    transition: opacity var(--t) var(--ease); cursor: pointer; text-align: center; }
  .veil.is-hidden { opacity: 0; pointer-events: none; }
  .veil__inner { padding: 1.4rem 2.2rem; border-radius: var(--radius);
    background: hsl(30 18% 6% / .82); backdrop-filter: blur(10px) saturate(1.1);
    border: 1px solid hsl(var(--gold) / .38);
    box-shadow: var(--shadow-elevated), 0 0 60px hsl(30 18% 4% / .5);
    transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); }
  .veil:hover .veil__inner { border-color: hsl(var(--gold) / .7); }
  .veil h3 { font-size: 1.5rem; }
  .veil p { margin-top: .4rem; font-size: .75rem; letter-spacing: .06em; color: hsl(var(--muted-foreground)); }

  .mapexit { position: absolute; top: 1rem; right: 1rem; z-index: 22; padding: .5rem .9rem; font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase; background: hsl(var(--background) / .9); border: 1px solid hsl(var(--border)); border-radius: var(--r-pill); color: hsl(var(--muted-foreground)); opacity: 0; pointer-events: none; transition: opacity var(--t) var(--ease); }
  .map.is-live .mapexit { opacity: 1; pointer-events: auto; }
  .mapexit:hover { color: hsl(var(--gold)); border-color: hsl(var(--gold) / .5); }
  .mapexit { min-height: 46px; }

  .zoomer { display: flex; flex-direction: column; background: hsl(var(--background) / .9); border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-soft); }
  .zoomer button { width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 0; border-bottom: 1px solid hsl(var(--border)); border-radius: 0; color: hsl(var(--foreground)); font-size: 1.125rem; line-height: 1; }
  .zoomer button:last-child { border-bottom: 0; }
  .zoomer button:hover { color: hsl(var(--gold)); border-color: hsl(var(--gold) / .5); }

  .search { display: flex; align-items: center; gap: .55rem; width: 300px; max-width: calc(100% - 2rem); padding: .55rem .9rem; background: hsl(var(--background) / .88); border: 1px solid hsl(var(--border)); border-radius: var(--r-pill); backdrop-filter: blur(12px); position: absolute; top: 1rem; left: 1rem; z-index: 12; }
  .search { padding-block: 0; }
  .map--compact .search { padding-block: 0; }
  #map-search-clear { flex: none; width: 44px; height: 44px; color: hsl(var(--gold)); background: none; border: 0; font-size: 1.25rem; }
  .search input { min-height: 44px; flex: 1; min-width: 0; background: none; border: none; outline: none; color: hsl(var(--foreground)); font-size: .8125rem; }
  .search input::placeholder { color: hsl(var(--muted-foreground)); }
  .map-suggestions { display: none; }

  .index { position: absolute; top: 4.5rem; left: 1rem; width: 258px; max-width: calc(100% - 2rem); background: hsl(var(--background) / .9); border: 1px solid hsl(var(--border)); border-radius: var(--radius); backdrop-filter: blur(14px); box-shadow: var(--shadow-elevated); overflow: hidden; }
  .index__head { padding: .9rem 1rem .75rem; }
  .index__head p { font-size: .5625rem; letter-spacing: .24em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
  .index__head h3 { margin-top: .2rem; font-size: 1.0625rem; }
  .index__head h3 i { color: hsl(var(--gold)); font-style: normal; }
  .index__list { border-top: 1px solid hsl(var(--border)); max-height: 34vh; overflow-y: auto; }
  .district { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .62rem 1rem; background: none; border: none; border-left: 2px solid transparent; text-align: left; transition: all var(--t) var(--ease); font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
  .district:hover { background: hsl(var(--secondary) / .6); color: hsl(var(--foreground)); }
  .district.is-active { background: hsl(var(--gold) / .09); border-left-color: hsl(var(--gold)); color: hsl(var(--gold)); }
  .district__n { font-family: ui-monospace, monospace; font-size: .5625rem; opacity: .6; }
  .district__name { flex: 1; }
  .district__c { font-family: ui-monospace, monospace; font-size: .5625rem; opacity: .7; }

  .narrative { position: absolute; bottom: 1rem; left: 1rem; width: 310px; max-width: calc(100% - 2rem); padding: 1rem 1.1rem; background: hsl(var(--background) / .92); border: 1px solid hsl(var(--border)); border-radius: var(--radius); backdrop-filter: blur(14px); box-shadow: var(--shadow-elevated); transition: opacity var(--t) var(--ease); }
  .narrative p.k { font-size: .5625rem; letter-spacing: .24em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
  .narrative h3 { margin-top: .2rem; font-size: 1.375rem; }
  .narrative p.d { margin-top: .45rem; font-size: .75rem; line-height: 1.65; color: hsl(var(--muted-foreground)); }

  .map:has(.detail.is-open) .index { opacity: 0; pointer-events: none; transform: translateX(-8px); }
  .index { transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
  .detail { position: absolute; bottom: 1rem; left: 1rem; width: 328px; max-width: calc(100% - 2rem); max-height: calc(100% - 2rem); overflow-y: auto; background: hsl(var(--background) / .96); border: 1px solid hsl(var(--gold) / .28); border-radius: var(--radius); backdrop-filter: blur(16px); box-shadow: var(--shadow-elevated); opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none; transition: all var(--t) var(--ease); z-index: 14; overscroll-behavior: contain; }
  .detail.is-open { opacity: 1; transform: none; pointer-events: auto; }

  .detail__scene { position: relative; height: min(34vh, 300px); overflow: hidden; border-bottom: 1px solid hsl(var(--border)); background: hsl(30 18% 6%); }

  .detail__scene img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
  .detail__scene figcaption { position: absolute; inset: auto 0 0 0; padding: 1.6rem .9rem .7rem; background: linear-gradient(transparent, hsl(30 18% 4% / .95)); font-family: var(--font-display); font-style: italic; font-size: .75rem; line-height: 1.5; color: hsl(var(--foreground) / .85); }
  .detail__tagline { position: absolute; top: .6rem; left: .6rem; }
  .detail__close { position: absolute; top: .6rem; right: .6rem; z-index: 3; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: hsl(var(--background) / .85); border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); font-size: .75rem; line-height: 1; }
  .detail__close:hover { color: hsl(var(--foreground)); border-color: hsl(var(--gold) / .5); }
  .detail__close { width: 46px; height: 46px; }
  .detail__body { padding: 1rem 1.15rem 1.15rem; }
  .detail__k { font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase; color: hsl(var(--gold)); }
  .detail h3 { margin-top: .2rem; font-size: 1.375rem; }
  .detail__d { margin-top: .45rem; font-size: .75rem; line-height: 1.65; color: hsl(var(--muted-foreground)); }
  .detail__tags { margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .3rem; }
  .tag { padding: .2rem .45rem; font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); }
  .detail__cta { margin-top: 1rem; display: flex; flex-direction: column; gap: .45rem; }
  .detail__cta .btn-atlas, .detail__cta .btn-ghost-gold { width: 100%; }
  .detail__cta .btn-quiet { align-self: center; }
  .detail__price { margin-top: .6rem; font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--muted-foreground)); text-align: center; }
  .detail__story { margin-top: .8rem; border-top: 1px solid hsl(var(--border)); }
  .detail__story summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; color: hsl(var(--gold)); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; }
  .detail__story summary::after { content: "+"; font-size: 1rem; }
  .detail__story[open] summary::after { content: "−"; }

  .minimap { width: 124px; padding: .55rem; background: hsl(var(--background) / .9); border: 1px solid hsl(var(--border)); border-radius: var(--radius); backdrop-filter: blur(12px); }
  .minimap svg { display: block; width: 100%; height: auto; }
  .minimap p { margin-top: .35rem; font-size: .5rem; letter-spacing: .2em; text-transform: uppercase; color: hsl(var(--muted-foreground)); text-align: center; }

  .pin { position: absolute; width: 118px; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer; will-change: transform, opacity; text-align: center; }

  .pin:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 4px; border-radius: var(--r); }
  .pin__medal { position: relative; width: 54px; height: 54px; margin: 0 auto; filter: drop-shadow(0 7px 12px hsl(0 0% 0% / .8)); transition: transform var(--t) cubic-bezier(.34, 1.56, .64, 1); }

  .pin__medal::before { content: ""; position: absolute; inset: -32%; border-radius: 50%;
    background: radial-gradient(circle, hsl(42 60% 60% / .30) 0%, hsl(42 60% 60% / .12) 45%, transparent 70%); z-index: -1; }
  .pin__medal svg { width: 100%; height: 100%; display: block; }
  .pin:hover .pin__medal, .pin.is-selected .pin__medal { transform: translateY(-4px) scale(1.14); }
  .pin__name { display: inline-block; margin-top: .2rem; padding: .16rem .5rem; border-radius: var(--r-pill);
    background: hsl(30 18% 6% / .82); backdrop-filter: blur(3px);
    font-size: .6875rem; font-weight: 600; letter-spacing: .03em; line-height: 1.25; color: hsl(38 55% 92%);
    text-shadow: 0 1px 2px hsl(0 0% 0% / .9); }
  .pin.is-selected .pin__name, .pin:hover .pin__name { background: hsl(var(--gold)); color: hsl(var(--charcoal)); text-shadow: none; }
  .pin__reveal { position: absolute; bottom: calc(100% + 2px); left: 50%; width: 92px; transform: translateX(-50%) translateY(8px) scale(.88); transform-origin: bottom center; opacity: 0; pointer-events: none; transition: all var(--t) cubic-bezier(.34, 1.56, .64, 1); }
  .pin:hover .pin__reveal, .pin.is-selected .pin__reveal { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  .pin.is-near .pin__reveal { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  .pin__reveal-kind { display: inline-block; margin-bottom: .3rem; padding: .14rem .45rem; font-size: .5rem; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--gold)); background: hsl(30 18% 6% / .92); border: 1px solid hsl(var(--gold) / .35); border-radius: var(--r); }
  .pin__reveal-frame { padding: 3px; background: linear-gradient(hsl(var(--gold)), hsl(var(--gold) / .45)); clip-path: url(#moorish-arch); filter: drop-shadow(0 14px 22px hsl(0 0% 0% / .8)); }
  .pin__reveal-frame img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; clip-path: url(#moorish-arch); }
  .pin__reveal-frame { position: relative; }
  .pin__reveal-frame .pin__pet { position: absolute; right: 7px; bottom: 7px; width: 38%; aspect-ratio: 1;
    object-fit: cover; border: 2px solid hsl(var(--gold)); border-radius: 50%; clip-path: none;
    box-shadow: 0 4px 10px hsl(0 0% 0% / .7); }
  .pin.is-dim { opacity: .18; }
  .pin.is-dim:hover { opacity: .85; }

  .pin.is-far .pin__medal { transform: scale(.76); }
  .pin.is-far .pin__name { opacity: 0; transition: opacity var(--t) var(--ease); }
  .pin.is-far:hover .pin__medal { transform: scale(1); }
  .pin.is-far:hover .pin__name { opacity: 1; }

  .maploading { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: hsl(30 18% 4%); text-align: center; transition: opacity var(--t-slow) var(--ease); }
  .maploading.is-done { opacity: 0; pointer-events: none; }
  .maploading.is-gone { display: none; }
  .maploading h3 { font-size: 1.25rem; letter-spacing: .14em; text-transform: uppercase; }
  .maploading p { margin-top: .6rem; font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
  .maploading__bar { margin: 1.2rem auto 0; width: 180px; height: 1px; background: hsl(var(--border)); overflow: hidden; }
  .maploading__bar i { display: block; height: 100%; width: 0%; background: hsl(var(--gold)); transition: width var(--t-slow) var(--ease); }
  .maploading small { display: block; margin-top: 1.2rem; font-size: .5rem; letter-spacing: .1em; color: hsl(var(--muted-foreground) / .6); }
  .maploading .err { margin-top: 1rem; font-size: .6875rem; letter-spacing: 0; text-transform: none; color: hsl(var(--gold)); max-width: 34ch; line-height: 1.7; }

  .attrib { position: absolute; bottom: .35rem; left: 1rem; right: 13rem; z-index: 11; font-size: .5rem; letter-spacing: .08em; color: hsl(var(--muted-foreground) / .5); }
  .attrib a { text-decoration: underline; }

  @media (max-width: 1080px) {
    .index, .minimap, .pad { display: none; }
    .mapctl { display: flex; }
    .narrative, .detail { width: calc(100% - 2rem); }
  }
  @media (min-width: 1081px) {

    .whereami, .narrative, .minimap, .pad { display: none !important; }
  }
  @media (max-width: 620px) {
    .map.is-live .search { width: calc(100% - 6.75rem); }
    .mapexit { min-width: 64px; padding-inline: .6rem; }
    .mapexit__extra { display: none; }
    .map-suggestions {
      position: absolute; top: 4.35rem; left: .75rem; right: .75rem; z-index: 13;
      display: flex; align-items: center; gap: .55rem; min-width: 0;
      padding: .35rem; border: 1px solid hsl(var(--border));
      background: hsl(var(--background) / .9); backdrop-filter: blur(12px);
      box-shadow: var(--shadow-soft); opacity: 0; pointer-events: none;
      transform: translateY(-4px);
      transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
    }
    .map.is-live:not(:has(.detail.is-open)) .map-suggestions {
      opacity: 1; pointer-events: auto; transform: none;
    }
    .map-suggestions__label {
      flex: none; padding-left: .45rem; font-size: .5625rem; letter-spacing: .16em;
      text-transform: uppercase; color: hsl(var(--gold));
    }
    .map-suggestions__rail {
      display: flex; gap: .35rem; min-width: 0; overflow-x: auto;
      scroll-snap-type: x proximity; overscroll-behavior-x: contain;
      scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .map-suggestions__rail::-webkit-scrollbar { display: none; }
    .map-suggestion {
      flex: 0 0 auto; min-height: 44px; padding: .45rem .7rem;
      scroll-snap-align: start; border: 1px solid hsl(var(--border));
      border-radius: var(--r-pill); background: hsl(var(--card));
      color: hsl(var(--foreground)); font-size: .6875rem; white-space: nowrap;
    }
    .map-suggestion:hover, .map-suggestion:focus-visible {
      border-color: hsl(var(--gold) / .65); color: hsl(var(--gold));
    }
    .map:has(.detail.is-open) .mapctl { opacity: 0; pointer-events: none; }

    .map:has(.detail.is-open) .mapexit { opacity: 0; pointer-events: none; }
    .mapctl { right: .75rem; bottom: 1.4rem; transition: opacity var(--t) var(--ease); }
    .zoomer button { width: 46px; height: 46px; }

    .detail {
      left: .5rem; bottom: .5rem; width: calc(100% - 1rem); max-width: none;
      max-height: calc(100% - 5rem); overscroll-behavior: contain;
    }
    .detail__scene {
      height: clamp(158px, 25svh, 202px); aspect-ratio: auto;
      display: grid; grid-template-columns: minmax(112px, 42%) 1fr;
    }
    .detail__scene img {
      width: 100%; height: 100%; object-fit: contain; object-position: center;
      background: hsl(var(--background));
    }
    .detail__scene figcaption {
      position: static; display: flex; align-items: center;
      padding: 2.75rem .75rem .8rem;
      background: linear-gradient(180deg, hsl(var(--card)), hsl(30 18% 4% / .96));
      line-height: 1.35;
    }
    .detail__tagline { top: .65rem; left: calc(42% + .75rem); right: 3.5rem; width: max-content; max-width: calc(58% - 4.25rem); }
    .detail__close { top: .5rem; right: .5rem; }
    .detail__body { padding: .85rem 1rem 1rem; }
    .detail__story, .detail__tags, .detail__cta .btn-quiet { display: none; }
    .detail__cta { margin-top: .75rem; }
    .pin { width: 92px; }
    .pin__medal { width: 44px; height: 44px; }
    .pin__name { margin-top: .1rem; padding: .12rem .38rem; font-size: .5625rem; }
    .pin__reveal { width: 76px; }
  }
  @media (max-width: 350px), (max-height: 650px) and (max-width: 620px) {

    .detail__scene { height: 146px; grid-template-columns: minmax(102px, 38%) 1fr; }
    .detail__tagline { left: calc(38% + .65rem); max-width: calc(62% - 4rem); }
    .detail .story-why { display: none; }
    .detail__d {
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }

  .how { display: grid; gap: 3rem; align-items: center; }
  @media (min-width: 940px) { .how { grid-template-columns: .82fr 1.18fr; gap: 5rem; } }
  .how__media { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--r); background: hsl(var(--card)); box-shadow: 0 30px 70px -30px hsl(0 0% 0% / .9); }
  .how__media video, .how__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .how h2 { margin-top: .6rem; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 300; }

  .steps { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.75rem; }

  .step { display: grid; grid-template-columns: 84px 1fr; gap: 1.25rem; align-items: start; }
  .step__shot img { width: 84px; height: 112px; object-fit: cover; border: 1px solid hsl(var(--border));
    background: hsl(var(--card)); }
  .step__shot { position: relative; }
  .step__icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--gold)); }
  .step__n { display: block; margin-top: .5rem; font-family: ui-monospace, monospace; font-size: .5625rem; letter-spacing: .18em; color: hsl(var(--muted-foreground)); text-align: center; }
  .step h3 { font-family: var(--font-display); font-style: italic; font-size: 1.625rem; font-weight: 300; }
  .step p { margin-top: .35rem; font-size: .9375rem; line-height: 1.7; color: hsl(var(--muted-foreground)); max-width: 46ch; }
  @media (max-width: 939px) {
    .how__media { width: min(78vw, 292px); margin-inline: auto; }
  }

  .fan__arch { overflow: visible !important; border: none !important; box-shadow: none !important; background: none !important; }
  .fan__arch .arch-frame {
    width: 100%; height: 100%; padding: 12px;
    background: linear-gradient(hsl(var(--gold) / .85), hsl(var(--gold) / .35));
    filter: drop-shadow(0 24px 44px hsl(0 0% 0% / .8));
  }
  .fan__arch .arch-frame img { object-fit: cover; }

  .how__media--arch { border-radius: 0; background: none; box-shadow: none; overflow: visible; aspect-ratio: 7/10; }
  .how__media--arch video, .how__media--arch img { clip-path: url(#moorish-arch); object-position: 50% 38%; }
  .how__media--arch::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    clip-path: url(#moorish-arch);
    box-shadow: inset 0 0 0 3px hsl(var(--gold) / .35);
  }

  .filmbtn {
    position: absolute; left: 8%; bottom: 1rem; z-index: 2;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem .9rem; border-radius: var(--r-pill); cursor: pointer;
    border: 1px solid hsl(0 0% 100% / .3);
    background: hsl(30 12% 7%); color: hsl(0 0% 100%);
    font-family: inherit; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
    transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease);
  }
  .filmbtn:hover, .filmbtn:focus-visible { background: hsl(30 12% 12%); border-color: hsl(var(--gold) / .7); }
  .filmbtn__pause { display: none; }
  .is-playing .filmbtn__play { display: none; }
  .is-playing .filmbtn__pause { display: block; }

  .section--plaster {
    position: relative;
    background:
      radial-gradient(ellipse 70% 60% at 24% 12%, hsl(36 58% 88% / .9), transparent 62%),
      linear-gradient(168deg, hsl(28 44% 82%) 0%, hsl(22 40% 74%) 52%, hsl(18 38% 66%) 100%);
    color: hsl(24 30% 16%);
    overflow: hidden;
  }
  .section--plaster::before {
    content: ""; position: absolute; inset: -12% -6% auto -6%; height: 118%;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22760%22%20height%3D%22420%22%20viewBox%3D%220%200%20760%20420%22%3E%3Cg%20transform%3D%22translate%2860%2C250%29%20rotate%28-24%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M0%2C0%20Q14.0%2C-50.6%2031.1%2C-77.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q24.1%2C-49.7%2053.6%2C-74.8%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q34.4%2C-45.7%2076.5%2C-66.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q44.0%2C-38.6%2097.8%2C-50.3%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q52.0%2C-28.6%20115.7%2C-28.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q57.6%2C-16.0%20128.0%2C0.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q52.0%2C-3.4%20115.7%2C28.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q44.0%2C6.6%2097.8%2C50.3%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q34.4%2C13.7%2076.5%2C66.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q24.1%2C17.7%2053.6%2C74.8%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q14.0%2C18.6%2031.1%2C77.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28210%2C300%29%20rotate%28-12%29%20scale%281.25%29%22%3E%3Cpath%20d%3D%22M0%2C0%20Q14.0%2C-50.6%2031.1%2C-77.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q24.1%2C-49.7%2053.6%2C-74.8%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q34.4%2C-45.7%2076.5%2C-66.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q44.0%2C-38.6%2097.8%2C-50.3%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q52.0%2C-28.6%20115.7%2C-28.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q57.6%2C-16.0%20128.0%2C0.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q52.0%2C-3.4%20115.7%2C28.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q44.0%2C6.6%2097.8%2C50.3%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q34.4%2C13.7%2076.5%2C66.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q24.1%2C17.7%2053.6%2C74.8%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q14.0%2C18.6%2031.1%2C77.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28370%2C240%29%20rotate%28-32%29%20scale%280.9%29%22%3E%3Cpath%20d%3D%22M0%2C0%20Q14.0%2C-50.6%2031.1%2C-77.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q24.1%2C-49.7%2053.6%2C-74.8%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q34.4%2C-45.7%2076.5%2C-66.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q44.0%2C-38.6%2097.8%2C-50.3%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q52.0%2C-28.6%20115.7%2C-28.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q57.6%2C-16.0%20128.0%2C0.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q52.0%2C-3.4%20115.7%2C28.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q44.0%2C6.6%2097.8%2C50.3%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q34.4%2C13.7%2076.5%2C66.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q24.1%2C17.7%2053.6%2C74.8%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q14.0%2C18.6%2031.1%2C77.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28520%2C310%29%20rotate%28-18%29%20scale%281.15%29%22%3E%3Cpath%20d%3D%22M0%2C0%20Q14.0%2C-50.6%2031.1%2C-77.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q24.1%2C-49.7%2053.6%2C-74.8%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q34.4%2C-45.7%2076.5%2C-66.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q44.0%2C-38.6%2097.8%2C-50.3%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q52.0%2C-28.6%20115.7%2C-28.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q57.6%2C-16.0%20128.0%2C0.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q52.0%2C-3.4%20115.7%2C28.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q44.0%2C6.6%2097.8%2C50.3%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q34.4%2C13.7%2076.5%2C66.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q24.1%2C17.7%2053.6%2C74.8%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q14.0%2C18.6%2031.1%2C77.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28660%2C260%29%20rotate%28-27%29%20scale%281.0%29%22%3E%3Cpath%20d%3D%22M0%2C0%20Q14.0%2C-50.6%2031.1%2C-77.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q24.1%2C-49.7%2053.6%2C-74.8%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q34.4%2C-45.7%2076.5%2C-66.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q44.0%2C-38.6%2097.8%2C-50.3%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q52.0%2C-28.6%20115.7%2C-28.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q57.6%2C-16.0%20128.0%2C0.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q52.0%2C-3.4%20115.7%2C28.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q44.0%2C6.6%2097.8%2C50.3%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q34.4%2C13.7%2076.5%2C66.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q24.1%2C17.7%2053.6%2C74.8%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20Q14.0%2C18.6%2031.1%2C77.0%22%20stroke%3D%22%23000%22%20stroke-width%3D%227%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-size: 940px auto;
    background-position: -80px -40px;
    background-repeat: repeat-x;
    opacity: .13;
    transform: rotate(-3deg);
    pointer-events: none;
  }

  .section--plaster::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
    background: hsl(var(--zellij-green));
    box-shadow: inset 0 3px 0 hsl(38 74% 55% / .55), 0 -1px 0 hsl(24 30% 16% / .18);
  }
  .section--plaster > * { position: relative; z-index: 2; }
  .section--plaster .eyebrow { color: hsl(18 62% 34%); }
  .section--plaster h2, .section--plaster h3 { color: hsl(24 34% 14%); }

  .section--plaster .step p { color: hsl(24 22% 23%); }
  .section--plaster .medallion { color: hsl(18 62% 34%); }
  .section--plaster .medallion::before { filter: brightness(.35) saturate(1.6); opacity: .8; }
  .section--plaster .btn-atlas {
    background: hsl(24 34% 14%); color: hsl(36 40% 92%);
    border-color: hsl(24 34% 14%); box-shadow: 0 6px 20px -8px hsl(24 40% 10% / .6);
  }
  .section--plaster .btn-atlas:hover { background: hsl(18 62% 34%); border-color: hsl(18 62% 34%); }
  .section--plaster .how__media--arch::after { box-shadow: inset 0 0 0 3px hsl(24 34% 14% / .35); }

  .formats { display: grid; gap: 1.25rem; }
  @media (min-width: 780px) { .formats { grid-template-columns: repeat(3, 1fr); } }
  .format { padding: 2rem 1.75rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); display: flex; flex-direction: column; }
  .format.is-featured { border-color: hsl(var(--gold) / .45); box-shadow: var(--shadow-gold); }
  .format__k { font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase; color: hsl(var(--gold)); }
  .format h3 { margin-top: .3rem; font-size: 1.5rem; }
  .format__price { margin-top: .9rem; font-family: var(--font-display); font-size: 2.25rem; color: hsl(var(--gold)); }
  .format__price small { font-family: var(--font-body); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
  .format ul { margin-top: 1.25rem; list-style: none; padding: 0; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
  .format li { font-size: .8125rem; line-height: 1.6; color: hsl(var(--muted-foreground)); padding-left: 1.2rem; position: relative; }
  .format li::before { content: "·"; position: absolute; left: .35rem; color: hsl(var(--gold)); font-size: 1.1875rem; line-height: 1; }
  .format .btn-atlas, .format .btn-ghost-gold { margin-top: 1.5rem; width: 100%; }

  .faq { max-width: 760px; margin-inline: auto; border-top: 1px solid hsl(var(--border)); }
  .faq details { border-bottom: 1px solid hsl(var(--border)); }
  .faq summary { padding: 1.35rem .5rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; font-family: var(--font-body); font-size: 1rem; font-weight:500; line-height:1.45; transition: color var(--t) var(--ease); }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary:hover { color: hsl(var(--gold)); }
  .faq summary::after { content: "+"; color: hsl(var(--gold)); font-size: 1.25rem; flex: none; transition: transform var(--t) var(--ease); }
  .faq details[open] > summary::after { transform: rotate(45deg); }
  .faq p { padding: 0 .5rem 1.35rem; font-size: 1rem; line-height: 1.65; color: hsl(var(--muted-foreground)); max-width: 65ch; }

  .faq p a { color: hsl(var(--gold)); text-decoration: underline;
    text-underline-offset: 3px; text-decoration-thickness: 1px;
    text-decoration-color: hsl(var(--gold) / .45);
    transition: text-decoration-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
  .faq p a:hover { color: hsl(var(--gold-light)); text-decoration-color: hsl(var(--gold)); }
  .faq p a:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 2px; border-radius: var(--r); }

  .final { position: relative; overflow: hidden; min-height: 520px; padding: 5rem 2rem; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; border: 1px solid hsl(var(--gold) / .3);
    background:
      linear-gradient(90deg, hsl(var(--background) / .62), hsl(var(--background) / .34) 44% 56%, hsl(var(--background) / .64)),
      linear-gradient(180deg, hsl(var(--background) / .18), hsl(var(--background) / .68)),
      url("/pets-assets/atmosphere/marrakech-dusk-final-v3.webp") center / cover no-repeat;
    box-shadow: var(--shadow-elevated); }
  .final > * { position: relative; z-index: 2; }
  .final .zellij-field { opacity: .12; mix-blend-mode: screen; }
  .final .heading-section { max-width: 15ch; text-shadow: 0 3px 28px hsl(var(--background)); }
  .final .lede { color: hsl(var(--foreground) / .82); text-shadow: 0 2px 16px hsl(var(--background)); }
  @media (max-width: 640px) {
    .final { min-height: 470px; padding: 3.5rem 1.15rem; background-position: 26% center; }
  }

  .section-head { text-align: center; margin-bottom: 3rem; }
  .section-head .lede { margin: 1rem auto 0; text-align: center; }

  .js-anim .reveal-up { opacity: 1; transform: none; }
  .js-anim .reveal-up.is-in { opacity: 1; transform: none; }

  .view { display: none; }
  .view.is-on { display: block; }
  body.in-app .site-footer, body.in-app .hero { display: none; }

  .flow { min-height: 100vh; padding-top: 72px; display: flex; flex-direction: column;
    background:
      radial-gradient(ellipse 70% 45% at 50% 0%, hsl(28 24% 13%), transparent 62%),
      linear-gradient(180deg, hsl(30 16% 7%), hsl(30 18% 5%) 45%); }
  .flowbar { position: sticky; top: 72px; z-index: 50; backdrop-filter: blur(16px);
    background: linear-gradient(hsl(30 16% 10% / .97), hsl(30 18% 7% / .94));
    border-bottom: 1px solid hsl(var(--border)); box-shadow: 0 10px 26px -18px hsl(0 0% 0% / .9); }
  .flowbar__inner { display: flex; align-items: center; gap: 1.75rem; padding-block: 1.15rem .95rem; }

  .steps-rail { position: relative; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 0; min-width: 0; }
  .steps-rail::before, .steps-rail::after { content: ""; position: absolute; left: 13px; right: 13px; top: 13px; height: 2px; border-radius: var(--r); }
  .steps-rail::before { background: hsl(var(--border)); }
  .steps-rail::after { background: linear-gradient(90deg, hsl(var(--gold-dark)), hsl(var(--gold)));
    width: calc((100% - 26px) * var(--progress, 0)); right: auto; transition: width var(--t-slow) var(--ease); }

  .srail { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .4rem;
    background: none; border: none; padding: 0; flex: none; width: 92px; }

  @media (max-width: 720px) {

    .flowbar__inner { flex-wrap: wrap; gap: .75rem 1rem; padding-block: .85rem 1.45rem; }

    .steps-rail { order: 2; flex: 1 1 100%; padding-inline: 1.6rem; }
    .placechip { order: 1; flex: 1 1 auto; min-width: 0; }
    .flowbar__inner > a[href="#/"] { order: 1; margin-left: auto; }
  }
  @media (max-width: 420px) {
    .placechip { display: inline-flex; padding-left: .4rem; gap: .35rem; }
    .placechip__ico { display: none; }
    .placechip__n { max-width: 9ch; }
    .srail__label { font-size: .5rem; letter-spacing: .1em; }
  }
  .srail__dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: hsl(30 18% 9%); border: 2px solid hsl(var(--border)); color: hsl(var(--muted-foreground));
    font-family: ui-monospace, monospace; font-size: .625rem; transition: all var(--t) cubic-bezier(.34, 1.56, .64, 1); }
  .srail__label { font-size: .5625rem; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--muted-foreground));
    white-space: nowrap; transition: color var(--t) var(--ease); }

  .srail.is-done .srail__dot { background: hsl(var(--gold)); border-color: hsl(var(--gold)); color: hsl(var(--charcoal)); }
  .srail.is-done .srail__label { color: hsl(var(--gold) / .8); }
  .srail.is-now .srail__dot { background: hsl(var(--gold)); border-color: hsl(var(--gold)); color: hsl(var(--charcoal));
    transform: scale(1.22); box-shadow: 0 0 0 5px hsl(var(--gold) / .16); }
  .srail.is-now .srail__label { color: hsl(var(--gold)); font-weight: 600; }
  .srail:hover .srail__dot { border-color: hsl(var(--gold) / .6); }

  @media (max-width: 900px) {
    .srail { width: 42px; }
    .srail__label { display: none; }
    .srail.is-now .srail__label { display: block; position: absolute; top: 2.1rem; left: 50%; transform: translateX(-50%); }

    .flowbar__inner { padding-bottom: 1.45rem; }
  }

  .step-pane { display: none; flex: 1; }
  .step-pane.is-on { display: block; }
  .pane-head { text-align: center; padding-block: 3.25rem 2.25rem; }
  .pane-head h2 { margin-top: .45rem; font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 300; line-height: 1.12; }

  .pane-head p:not(.eyebrow) { margin: .7rem auto 0; max-width: 54ch; font-size: .9375rem; line-height: 1.8; color: hsl(var(--muted-foreground)); }

  .drop {
    display: block;
    max-width: 560px; margin: 0 auto; padding: 3rem 2rem; text-align: center; cursor: pointer;
    border: 1px dashed hsl(var(--gold) / .35); border-radius: var(--radius);
    background: hsl(var(--card) / .5); transition: all var(--t) var(--ease); position: relative; overflow: hidden;
  }
  .drop:hover, .drop.is-over { border-color: hsl(var(--gold)); background: hsl(var(--gold) / .05); }
  .drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .drop__icon { width: 46px; height: 46px; margin: 0 auto 1rem; color: hsl(var(--gold) / .7); }
  .drop h3 { font-size: 1.375rem; }
  .drop p { margin-top: .4rem; font-size: .8125rem; color: hsl(var(--muted-foreground)); }
  .drop__hint { margin-top: 1.25rem; font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--muted-foreground) / .7); }

  .memo { display: flex; align-items: flex-start; gap: .5rem; margin-top: .75rem; cursor: pointer;
    font-family: var(--font-body); font-size: .8125rem; font-weight: 400; line-height: 1.45;
    letter-spacing: 0; text-transform: none; color: hsl(var(--muted-foreground)); }

  .memo { min-height: 44px; align-items: center; padding: .35rem .1rem; }
  .memo input { width: 22px; height: 22px; margin-top: 0; flex: none;
    accent-color: hsl(var(--gold)); cursor: pointer; }
  .memo span { text-transform: none; letter-spacing: 0; font-size: .8125rem; }
  .memo:hover span { color: hsl(var(--foreground)); }

  .petcard { max-width: 560px; margin: 0 auto; display: grid; gap: 1.5rem; grid-template-columns: 150px 1fr; align-items: center; padding: 1.5rem; border: 1px solid hsl(var(--gold) / .3); background: hsl(var(--card)); }
  .petcard__img { aspect-ratio: 1; overflow: hidden; border: 1px solid hsl(var(--border)); }
  .petcard__img img { width: 100%; height: 100%; object-fit: cover; }
  .petcard label { display: block; font-size: .5625rem; letter-spacing: .2em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }

  .petcard label.memo { display: flex; align-items: center; gap: .55rem;
    font-size: .8125rem; letter-spacing: 0; text-transform: none; }
  .petcard input[type=text] { width: 100%; margin-top: .5rem; padding: .7rem .9rem; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); font-size: .9375rem; font-family: var(--font-display); }
  .petcard input[type=text]:focus { outline: none; border-color: hsl(var(--gold) / .6); }
  .petcard input[type=text]:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 2px; }
  .petcard__row { margin-top: 1rem; display: flex; gap: .5rem; flex-wrap: wrap; }

  @media (max-width: 560px) {
    .petcard { grid-template-columns: 94px minmax(0, 1fr); gap: .9rem; padding: 1rem; align-items: start; }
    .petcard__img { width: 94px; margin: 0; }
    .petcard__row { justify-content: stretch; }
    .petcard__row .btn-sm { flex: 1; }
  }

  .btn-google { width: 100%; display: flex; align-items: center; justify-content: center; gap: .6rem;
    padding: .85rem 1rem; margin-bottom: 1rem; background: hsl(var(--foreground)); color: #1f1a15;
    border: 0; font-family: var(--font-sans); font-size: .875rem; font-weight: 500; cursor: pointer;
    transition: opacity var(--t-fast) var(--ease); }
  .btn-google:hover { opacity: .88; }
  .btn-google:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 2px; }
  .btn-google[hidden] { display: none; }
  .auth-or { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; font-size: .6875rem;
    letter-spacing: .18em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
  .auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: hsl(var(--border)); }
  .auth-or[hidden] { display: none; }

  .memo { display: flex; align-items: center; gap: .55rem; margin-top: .9rem;
    font-size: .8125rem; color: hsl(var(--muted-foreground)); cursor: pointer; }
  .memo input[type=checkbox] { appearance: none; -webkit-appearance: none; margin: 0;
    width: 15px; height: 15px; flex: 0 0 15px; border: 1px solid hsl(var(--border));
    background: hsl(var(--background)); cursor: pointer; position: relative; }
  .memo input[type=checkbox]:checked { border-color: hsl(var(--gold) / .7); }
  .memo input[type=checkbox]:checked::after { content: ""; position: absolute; left: 4px; top: 0;
    width: 5px; height: 10px; border: solid hsl(var(--gold)); border-width: 0 2px 2px 0;
    transform: rotate(45deg); }
  .memo input[type=checkbox]:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 2px; }

  .look { max-width: 560px; margin: 1.25rem auto 0; }
  .look[hidden] { display: none; }
  .look__wait { display: flex; align-items: center; gap: .6rem; font-size: .8125rem;
    color: hsl(var(--muted-foreground)); }
  .look__wait i { width: 12px; height: 12px; border: 2px solid hsl(var(--gold) / .35);
    border-top-color: hsl(var(--gold)); border-radius: 50%; animation: lookspin .7s linear infinite; }
  @keyframes lookspin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .look__wait i { animation: none; } }

  .look__lede { font-family: var(--font-display); font-size: 1.0625rem; color: hsl(var(--foreground));
    margin: 0 0 .15rem; }
  .look__lede b { color: hsl(var(--gold)); font-weight: 400; }
  .look__basis { font-size: .6875rem; line-height: 1.6; color: hsl(var(--muted-foreground)); margin: 0 0 .9rem; }

  .look__cards { display: grid; gap: .5rem; grid-template-columns: repeat(3, 1fr); }
  .look__card { display: flex; flex-direction: column; gap: .35rem; text-align: left; padding: .8rem;
    background: hsl(var(--card)); border: 1px solid hsl(var(--border)); color: inherit; cursor: pointer;
    font: inherit; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
  .look__card:hover, .look__card:focus-visible { border-color: hsl(var(--gold) / .55); background: hsl(var(--secondary)); }
  .look__card:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 2px; }
  .look__rank { font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase;
    color: hsl(var(--gold)); }
  .look__name { font-family: var(--font-display); font-size: .9375rem; color: hsl(var(--foreground)); line-height: 1.25; }
  .look__why { font-size: .6875rem; line-height: 1.55; color: hsl(var(--muted-foreground)); }

  .look__row { margin-top: .75rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
  .look__all { font-size: .75rem; color: hsl(var(--muted-foreground)); text-decoration: underline;
    text-underline-offset: 3px; background: none; border: 0; cursor: pointer; font-family: inherit; padding: .4rem 0; }
  .look__all:hover { color: hsl(var(--gold)); }

  .look--no { border: 1px solid hsl(var(--terracotta) / .45); background: hsl(var(--terracotta) / .07); padding: 1rem 1.1rem; }
  .look__nohead { font-family: var(--font-display); font-size: 1.0625rem; color: hsl(var(--foreground)); margin: 0 0 .3rem; }
  .look__nobody { font-size: .8125rem; line-height: 1.65; color: hsl(var(--muted-foreground)); margin: 0; }

  @media (max-width: 700px) {

    .look__cards { grid-template-columns: 1fr; }
  }

  .guides { max-width: 560px; margin: 2rem auto 0; display: grid; gap: .75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guides[hidden] { display: none; }
  .guide { min-width:0; padding: 1rem; border: 1px solid hsl(var(--border)); text-align: center; overflow-wrap:anywhere; }
  .guide b { display: block; font-family: var(--font-body); font-weight:500; font-size: 1rem; color: hsl(var(--foreground)); }
  .guide span { display: block; margin-top: .25rem; font-size: .875rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }
  @media(max-width:760px) { .guides { grid-template-columns:1fr; } .guide { text-align:left; } }
  .guides__note { max-width: 560px; margin: .85rem auto 0; font-size: .75rem; line-height: 1.7;
    color: hsl(var(--muted-foreground)); }
  .deck .guides__note { margin-left: 0; margin-right: 0; }

  #flow-map-slot { position: relative; }
  #flow-map-slot .map { height: calc(100vh - 190px); min-height: 460px; }

  .painting { max-width: 900px; margin: 0 auto; display: grid; gap: 3rem; align-items: center; }
  @media (min-width: 880px) { .painting { grid-template-columns: 1fr 1fr; } }
  .proof { position: relative; aspect-ratio: 4/5; overflow: hidden; border: 1px solid hsl(var(--border)); background: hsl(30 18% 6%); }
  .proof img { width: 100%; height: 100%; object-fit: cover; transition: filter 1.4s var(--ease), opacity 1.4s var(--ease), transform 1.4s var(--ease); }
  .proof.is-working img { filter: blur(22px) saturate(.5); opacity: .45; transform: scale(1.06); }
  .proof__mark { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .8s; display: grid; place-items: center; }
  .proof.is-done .proof__mark { opacity: 1; }
  .proof__mark span { font-family: var(--font-display); font-size: 1rem; letter-spacing: .4em; text-transform: uppercase; color: hsl(var(--cream) / .22); transform: rotate(-24deg); }
  .proof__cap { position: absolute; inset: auto 0 0 0; padding: 2.5rem 1.1rem .9rem; background: linear-gradient(transparent, hsl(30 18% 4% / .95)); font-family: var(--font-display); font-style: italic; font-size: .8125rem; line-height: 1.6; }
  .prog { height: 2px; background: hsl(var(--border)); overflow: hidden; margin-top: 1.5rem; }
  .prog i { display: block; height: 100%; width: 0; background: hsl(var(--gold)); transition: width var(--t-slow) linear; }
  .steplist { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .55rem; }
  .steplist li { list-style: none; font-size: .8125rem; color: hsl(var(--muted-foreground) / .55); transition: color var(--t) var(--ease); display: flex; gap: .6rem; }
  .steplist li.is-on { color: hsl(var(--foreground)); }
  .steplist li.is-done { color: hsl(var(--muted-foreground)); }
  .steplist li::before { content: "○"; color: hsl(var(--gold) / .5); }
  .steplist li.is-done::before { content: "●"; }

  .fmt-grid { display: grid; gap: 1.25rem; max-width: 1000px; margin: 0 auto; }
  @media (min-width: 820px) { .fmt-grid { grid-template-columns: repeat(2, 1fr); } }
  .fmt { padding: 1.75rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); cursor: pointer; transition: all var(--t) var(--ease); text-align: left; width: 100%; }
  .fmt:hover { border-color: hsl(var(--gold) / .45); }
  .fmt.is-sel { border-color: hsl(var(--gold)); box-shadow: var(--shadow-gold); background: hsl(var(--gold) / .04); }
  .fmt__k { font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase; color: hsl(var(--gold)); }
  .fmt h3 { margin-top: .25rem; font-size: 1.5rem; }
  .fmt p { margin-top: .4rem; font-size: .8125rem; line-height: 1.7; color: hsl(var(--muted-foreground)); }
  .fmt.is-closed { opacity: .82; }
  .fmt__closed { margin-top: .45rem; font-size: 13px; line-height: 1.5; color: hsl(var(--gold)); }
  .fmt__price { margin-top: .9rem; font-family: var(--font-display); font-size: 1.75rem; color: hsl(var(--gold)); }

  .opts { max-width: 1000px; margin: 1.5rem auto 0; padding: 1.5rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .5); }
  .opts__row + .opts__row { margin-top: 1.25rem; }
  .opts label { font-size: .5625rem; letter-spacing: .2em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
  .chips { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .45rem; }
  .chip-opt { padding: .55rem .95rem; border: 1px solid hsl(var(--border)); background: none; color: hsl(var(--muted-foreground)); font-size: .6875rem; letter-spacing: .1em; transition: all var(--t) var(--ease); }
  .chip-opt:hover { border-color: hsl(var(--gold) / .5); color: hsl(var(--foreground)); }
  .chip-opt.is-sel { background: hsl(var(--gold) / .1); color: hsl(var(--gold)); border-color: hsl(var(--gold)); }

  .chip-opt small { display: block; font-size: .5625rem; opacity: .92; }

  .review { max-width: 940px; margin: 0 auto; display: grid; gap: 2rem; }
  @media (min-width: 880px) { .review { grid-template-columns: 1fr 380px; align-items: start; } }
  .rev-card { padding: 1.75rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
  .rev-line { display: flex; justify-content: space-between; gap: 1rem; padding-block: .6rem; font-size: .875rem; }
  .rev-line + .rev-line { border-top: 1px solid hsl(var(--border)); }
  .rev-line span:first-child { color: hsl(var(--muted-foreground)); }
  .rev-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid hsl(var(--gold) / .3); }
  .rev-total span:first-child { font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
  .rev-total span:last-child { font-family: var(--font-display); font-size: 2rem; color: hsl(var(--gold)); }
  .field { margin-top: 1rem; }
  .field label { display: block; font-size: .5625rem; letter-spacing: .2em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
  .field input, .field select, .field textarea { width: 100%; margin-top: .45rem; padding: .7rem .9rem; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); font-size: .875rem; font-family: var(--font-body); }
  .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: hsl(var(--gold) / .6); }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 2px; }

  .field__note { margin-top: .5rem; font-size: .75rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }
  .field__warn { margin-top: .5rem; padding: .6rem .75rem; border-left: 2px solid hsl(var(--terracotta));
    background: hsl(16 40% 20% / .28); font-size: .75rem; line-height: 1.6; color: hsl(36 30% 82%); }
  .field__warn.is-good { color: hsl(var(--gold) / .92); }
  .opts__row .field__note { margin-top: .65rem; max-width: 62ch; }

  .deck__h, #p3-title, .studio-card figcaption b { overflow-wrap: anywhere; }

  .promises { display: grid; gap: .1rem; margin-top: 1.5rem; padding: 1.1rem 1.25rem;
    border: 1px solid hsl(var(--border)); border-radius: var(--radius);
    background: linear-gradient(180deg, hsl(var(--card) / .7), hsl(var(--card) / .35)); }
  @media (min-width: 760px) { .promises { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
  .promises li { list-style: none; padding-block: .45rem; }
  .promises b { display: block; font-family: var(--font-display); font-size: 1rem; color: hsl(var(--gold)); }
  .promises span { display: block; margin-top: .25rem; font-size: .75rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }
  @media (max-width: 759px) { .promises li + li { border-top: 1px solid hsl(var(--border)); } }

  .tally__nudge { margin-top: .7rem; padding: .5rem .7rem; border-radius: var(--radius);
    background: hsl(42 40% 22% / .3); border-left: 2px solid hsl(var(--gold));
    font-size: .75rem; line-height: 1.5; color: hsl(42 40% 82%); }

  .stylepick { margin-top: 1.75rem; }
  .stylepick__k { font-size: .5625rem; letter-spacing: .24em; text-transform: uppercase;
    color: hsl(var(--muted-foreground)); margin-bottom: .7rem; }
  .stylepick__k span { color: hsl(var(--gold)); }

  .stylepick__row { -webkit-mask-image: linear-gradient(to right, #000 90%, transparent);
    mask-image: linear-gradient(to right, #000 90%, transparent);
    display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .5rem;
    scrollbar-width: thin; }
  .styletile { position: relative; display: flex; flex-direction: column; align-items: stretch; flex: 0 0 6.5rem; padding: 0; overflow: hidden;
    border: 1px solid hsl(var(--border)); border-radius: var(--r); background: hsl(var(--card));
    cursor: pointer; transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
  .styletile img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover;
    transition: opacity var(--t) var(--ease), filter var(--t) var(--ease); }
  .styletile__n { display: block; padding: .4rem .3rem .45rem; font-size: .8125rem;
    letter-spacing: .01em; color: hsl(var(--foreground)); }
  .styletile__detail { display: block; margin-top: auto; padding: 0 .3rem .5rem; font-size: .8125rem; line-height: 1.4; color: hsl(var(--muted-foreground)); }
  .styletile:hover { border-color: hsl(var(--gold) / .55); box-shadow: var(--shadow-elevated); }
  .styletile.is-on { border-color: hsl(var(--gold)); box-shadow: var(--shadow-gold); }
  .styletile.is-on .styletile__n { color: hsl(var(--gold)); }

  .styletile.is-locked img { filter: saturate(.45) brightness(.62); }
  .styletile.is-locked .styletile__n { color: hsl(var(--muted-foreground)); }
  .styletile__lock { position: absolute; top: .4rem; right: .4rem; font-size: .6875rem;
    filter: grayscale(1) brightness(1.6); opacity: .85; }
  .styletile--more { flex: 0 0 106px; display: grid; place-items: center; text-align: center;
    border-style: dashed; border-color: hsl(var(--gold) / .45); background: hsl(var(--gold) / .05); }
  .styletile--more span { font-size: .625rem; line-height: 1.7; color: hsl(var(--muted-foreground)); padding: .5rem; }
  .styletile--more b { font-family: var(--font-display); font-size: 1.125rem; color: hsl(var(--gold)); }

  .chiprow { display: flex; flex-wrap: wrap; gap: .5rem; }
  .chip-st {
    min-height: 44px; padding: .5rem .95rem; border-radius: var(--r-pill); cursor: pointer;
    background: transparent; color: hsl(36 30% 82%);
    border: 1px solid hsl(36 22% 34%);
    font-family: var(--font-body); font-size: .8125rem; letter-spacing: .02em;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .chip-st:hover { border-color: hsl(var(--gold)); color: hsl(38 46% 92%); }
  .chip-st.is-on {
    background: hsl(var(--gold)); border-color: hsl(var(--gold)); color: hsl(30 24% 12%);
    font-weight: 500;
  }
  .chip-st[disabled] { opacity: .5; cursor: default; }

  .stylepick__note { margin-top: .55rem; font-size: .6875rem; line-height: 1.6;
    color: hsl(var(--muted-foreground)); max-width: 66ch; }
  .paint-confirm { margin-top: 1.35rem; padding: 1rem; border: 1px solid hsl(var(--gold) / .28);
    background: hsl(var(--card) / .62); }
  .paint-confirm__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .paint-confirm__head b { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; }
  .paint-confirm__head span { color: hsl(var(--gold)); font-size: .75rem; }
  .paint-confirm .stylepick { margin-top: .85rem; }
  .paint-confirm .stylepick__note { margin-bottom: 0; }

  .framer { display: grid; grid-template-columns: 1.15fr .85fr; column-gap: 3.5rem; align-items: center; }
  .framer__slider-head { display: none; }
  .framer__rail { display: contents; }
  .framer__slide--finish { display: contents; }
  .framer__stage { grid-column: 1; grid-row: 1 / 4; }
  .framer__controls { grid-column: 2; grid-row: 1; align-self: end; }
  .framer__slide--details { grid-column: 2; grid-row: 2; }
  .framer__cta { grid-column: 2; grid-row: 3; justify-self: start; }

  .framer__wall { display: grid; place-items: center; padding: 2.5rem 1.5rem;
    border-radius: var(--r);
    background:
      radial-gradient(120% 90% at 50% 0%, hsl(32 22% 20% / .55), transparent 70%),
      linear-gradient(hsl(30 14% 11%), hsl(30 16% 8%)); }

  .fr { margin: 0; width: min(360px, 100%); transition: filter var(--t) var(--ease); }
  .fr__moulding { position: relative; padding: 20px; border-radius: var(--r);

    background: linear-gradient(145deg, var(--fr-hi), var(--fr-base) 42%, var(--fr-lo));
    box-shadow:
      inset 0 0 0 1px hsl(0 0% 0% / .3),
      inset 0 2px 2px hsl(0 0% 100% / .16),
      0 34px 60px -22px hsl(0 0% 0% / .92),
      0 4px 10px -4px hsl(0 0% 0% / .6);
    transition: background var(--t) var(--ease); }

  .fr__moulding::after { content: ""; position: absolute; inset: 17px; pointer-events: none;
    box-shadow: inset 0 1px 2px hsl(0 0% 0% / .55), inset 0 -1px 0 hsl(0 0% 100% / .1); }

  .fr__mount { position: relative; padding: var(--fr-mount, 16.67%);
    background: var(--fr-mountcol, #f9f9f9);
    transition: padding var(--t) var(--ease), background var(--t) var(--ease); }

  .fr__bevel { position: relative; line-height: 0;
    box-shadow:
      -2px -2px 0 1.5px #ffffff,
      2px 2px 0 1.5px #cfccc7,
      0 0 0 2.5px hsl(30 6% 74% / .6); }
  .fr[data-mount="off"] .fr__mount { padding: 0; }
  .fr[data-mount="off"] .fr__bevel { box-shadow: none; }
  .fr__bevel img { display: block; width: 100%; height: auto; }

  .fr__glaze { position: absolute; inset: 20px; z-index: 2; pointer-events: none;
    background: linear-gradient(118deg, hsl(0 0% 100% / .1) 0%, hsl(0 0% 100% / .03) 26%,
      transparent 44%, transparent 100%); }

  .framer__cap { margin-top: 1.1rem; text-align: center; font-size: .8125rem; color: hsl(var(--foreground)); }
  .framer__disc { margin-top: .3rem; text-align: center; font-size: .6875rem; color: hsl(var(--muted-foreground) / .8); }

  .framer__k { margin: 0 0 .7rem; font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
    color: hsl(var(--muted-foreground)); }
  .framer__swatches { display: flex; flex-wrap: wrap; gap: .55rem; }
  .fsw { width: 46px; height: 46px; padding: 0; border-radius: var(--r); cursor: pointer;
    border: 1px solid hsl(var(--border));
    box-shadow: inset 0 2px 3px hsl(0 0% 100% / .18), inset 0 -2px 3px hsl(0 0% 0% / .3);
    transition: box-shadow var(--t-fast) var(--ease), outline-color var(--t-fast) var(--ease);
    outline: 2px solid transparent; outline-offset: 3px; }
  .fsw:hover { outline-color: hsl(var(--gold) / .5); }
  .fsw[aria-checked="true"] { outline-color: hsl(var(--gold)); }
  .fsw--off { position: relative; background: hsl(var(--card)); }
  .fsw--off::after { content: ""; position: absolute; inset: 8px;
    background: linear-gradient(45deg, transparent 46%, hsl(var(--muted-foreground)) 46% 54%, transparent 54%); }

  .framer__toggle { display: inline-flex; border: 1px solid hsl(var(--border)); border-radius: var(--r-pill); padding: 3px; }
  .framer__toggle button { padding: .45rem .95rem; border: 0; border-radius: var(--r-pill); cursor: pointer;
    background: transparent; color: hsl(var(--muted-foreground));
    font-family: inherit; font-size: .75rem; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
  .framer__toggle button[aria-checked="true"] { background: hsl(var(--secondary)); color: hsl(var(--gold)); }
  .framer__note { margin: .7rem 0 0; font-size: .75rem; line-height: 1.7; color: hsl(var(--muted-foreground)); }

  .framer__more { display: flex; align-items: center; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; }
  .framer__more span { font-size: .6875rem; color: hsl(var(--muted-foreground) / .85); }
  .framer__more-short { display: none; }
  .fdot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid hsl(var(--border));
    box-shadow: inset 0 1px 2px hsl(0 0% 100% / .2), inset 0 -1px 2px hsl(0 0% 0% / .25); }

  .framer__detail-title { margin: 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; color: hsl(var(--foreground)); }
  .framer__detail-copy { margin: .45rem 0 0; max-width: 40ch; font-size: .75rem; line-height: 1.55; color: hsl(var(--muted-foreground)); }
  .framer__spec { margin: 1rem 0 1.35rem; padding-top: 1rem; border-top: 1px solid hsl(var(--border));
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .framer__spec > div { min-width: 0; padding: .75rem .8rem; border-left: 2px solid hsl(var(--gold) / .55); background: hsl(var(--secondary) / .55); }
  .framer__spec dt { margin-bottom: .28rem; font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--gold)); }
  .framer__spec dd { margin: 0; font-size: .75rem; line-height: 1.5; color: hsl(var(--foreground) / .9); }

  @media (max-width: 939px) {
    .framer { display: block; }
    .framer__slider-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
    .framer__count { margin: 0; font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
    .framer__rail { display: grid; grid-auto-flow: column; grid-auto-columns: 88%; grid-template-rows: 1fr; align-items: stretch; gap: 1rem; overflow-x: auto;
      overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
      scroll-padding-inline: 0; -webkit-overflow-scrolling: touch; }
    .framer__rail::-webkit-scrollbar { display: none; }
    .framer__rail:focus-visible { outline: 2px solid hsl(var(--gold) / .7); outline-offset: 5px; }
    .framer__slide { min-width: 0; height: 100%; padding: 1rem; border: 1px solid hsl(var(--border));
      background: hsl(var(--card)); scroll-snap-align: center; }
    .framer__slide--finish { display: block; }
    .framer__wall { padding: 1.25rem 1rem; }
    .fr { width: min(232px, 100%); }
    .framer__cap { margin-top: .7rem; font-size: .75rem; }
    .framer__disc { margin-top: .2rem; font-size: .625rem; line-height: 1.45; }
    .framer__controls { margin-top: .9rem; }
    .framer__controls .framer__k { margin-bottom: .45rem; }
    .framer__controls .framer__k[style] { margin-top: 1rem !important; }
    .framer__swatches { gap: .45rem; }
    .framer__note { margin-top: .5rem; font-size: .6875rem; line-height: 1.5; }
    .framer__more { margin-top: .55rem; gap: .4rem; }
    .framer__more span { font-size: .625rem; line-height: 1.4; }
    .framer__more-full { display: none; }
    .framer__more-short { display: inline; }
    .framer__toggle { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); width: 100%; }
    .framer__toggle button { min-width: 0; padding-inline: .5rem; }
    .framer__slide--details { grid-column: auto; grid-row: auto; align-self: stretch; }
    .framer__slide--details { padding: 1rem; }
    .framer__slide--details { display: flex; flex-direction: column; }
    .framer__detail-title { font-size: 1.5rem; }
    .framer__detail-copy { margin-top: .45rem; font-size: .75rem; line-height: 1.55; }
    .framer__slide--details .framer__spec { flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: .45rem; margin: .7rem 0 0; padding-top: .7rem; }
    .framer__slide--details .framer__spec > div { padding: .75rem .8rem; }
    .framer__slide--details .framer__spec dt { margin-bottom: .28rem; font-size: .625rem; letter-spacing: .16em; }
    .framer__slide--details .framer__spec dd { font-size: .75rem; line-height: 1.5; }
    .framer__slide--details .framer__spec > div { display: flex; flex-direction: column; justify-content: center; }
    .framer__cta { width: 100%; margin-top: 1.2rem; }
  }

  @media (max-width: 640px) {
    .framer__rail { grid-auto-columns: 100%; }
    .framer__slide { scroll-snap-align: start; }
  }

  .chip-opt .sw { display: inline-block; width: 22px; height: 22px; border-radius: var(--r);
    margin-right: .55rem; vertical-align: -6px; position: relative;
    box-shadow: inset 0 1px 0 hsl(0 0% 100% / .35), inset 0 -1px 0 hsl(0 0% 0% / .35),
                0 1px 3px hsl(0 0% 0% / .5);
    border: 1px solid hsl(0 0% 0% / .35); }
  .chip-opt .sw--none { background:
      linear-gradient(135deg, transparent 44%, hsl(var(--muted-foreground) / .8) 44%,
                      hsl(var(--muted-foreground) / .8) 56%, transparent 56%),
      hsl(var(--background)); }
  .chip-opt.is-sel .sw { box-shadow: inset 0 1px 0 hsl(0 0% 100% / .45),
                                     inset 0 -1px 0 hsl(0 0% 0% / .35),
                                     0 0 0 2px hsl(30 18% 5% / .55); }

  .chip-opt { transition: transform var(--t-fast) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease); }

  .chip-opt:active { transform: translateY(0) scale(.985); }

  .hero--sun, .section--plaster {
    --gold-lit: 40 84% 24%;
    --ink: 24 30% 16%;

    --ink-soft: 26 26% 19%;
  }

  .hero--sun {
    --gold-lit: 42 62% 66%;
    --ink: 38 30% 88%;
    --ink-soft: 38 20% 76%;
  }
  .hero--sun .hero__bg {
    background:
      linear-gradient(180deg, hsl(28 20% 7% / .68) 0%, hsl(24 18% 6% / .76) 52%, hsl(20 16% 4% / .88) 100%),
      radial-gradient(ellipse 70% 60% at 22% 6%, hsl(28 32% 14% / .3), transparent 62%),
      url("/pets-assets/hero-marrakech-v4.webp") center top / cover no-repeat;
  }
  .hero--sun { color: hsl(38 30% 88%); }
  .hero--sun .eyebrow { color: hsl(42 62% 62%); }
  .hero--sun h1 { color: hsl(38 34% 94%); }
  .hero--sun h1 em { color: hsl(18 74% 62%); }
  .hero--sun .lede { color: hsl(38 20% 78%); }
  .hero--sun .hero__price { color: hsl(38 20% 78%); }
  .hero--sun .hero__price b { color: hsl(38 32% 92%); }
  .hero--sun .hero__ticks { color: hsl(38 22% 80%); }
  .hero--sun .hero__ticks span::before { color: hsl(150 40% 62%); }
  .hero--sun .hero__pick-k { color: hsl(38 24% 72%); }

  .hero--sun .zellij-field { opacity: .05; }

  .hero--sun .rail::before { background: linear-gradient(90deg, hsl(26 19% 8%), transparent); }
  .hero--sun .rail::after  { background: linear-gradient(270deg, hsl(21 16% 5%), transparent); }

  .hero--sun .styletog { color: hsl(38 20% 72%); }
  .hero--sun .styletog:hover { color: hsl(42 66% 74%); }
  .hero--sun .styletog.is-on { color: hsl(38 34% 95%); }
  .hero--sun .styletog.is-on::after { background: hsl(42 62% 58%); }
  .hero--sun .styles__row .styletog + .styletog::before { color: hsl(38 14% 46%); }
  .hero--sun .styles__all { color: hsl(42 62% 66%); }
  .hero--sun .styles__blurb { color: hsl(38 20% 76%); }

  .hero--sun .hero__pitch { color: hsl(38 20% 76%); }
  .hero--sun .hero__tour {
    border-color: hsl(38 28% 74% / .3); background: hsl(38 30% 88% / .06);
    color: hsl(38 32% 88%); }
  .hero--sun .hero__tour:hover {
    border-color: hsl(42 58% 58%); color: hsl(42 66% 78%); background: hsl(38 30% 88% / .1); }

  .hero--sun .places button, .hero--sun .pickbtn {
    border-color: hsl(38 28% 74% / .28); background: hsl(38 30% 88% / .06);
    color: hsl(38 30% 86%); }
  .hero--sun .places button:hover, .hero--sun .pickbtn:hover {
    border-color: hsl(42 58% 58%); color: hsl(42 66% 78%); }
  .hero--sun .pickbtn--go {
    background: hsl(38 34% 94%); border-color: hsl(38 34% 94%); color: hsl(24 30% 12%); }
  .hero--sun .pickbtn--go:hover {
    background: hsl(42 62% 70%); border-color: hsl(42 62% 70%); color: hsl(24 34% 10%); }

  .hero--sun .herodrop {
    border-color: hsl(38 26% 72% / .3); background: hsl(38 30% 88% / .045); }
  .hero--sun .herodrop:hover, .hero--sun .herodrop.is-over {
    border-color: hsl(42 58% 58%); background: hsl(38 30% 88% / .08); }
  .hero--sun .herodrop:focus-within {
    border-color: hsl(42 62% 62%); background: hsl(38 30% 88% / .08);
    outline-color: hsl(42 62% 62%); }
  .hero--sun .herodrop__ico { color: hsl(42 62% 64%); }
  .hero--sun .herodrop strong { color: hsl(38 34% 94%); }
  .hero--sun .herodrop > span:not(.hero__go) { color: hsl(38 20% 76%); }
  .hero--sun .herodrop .herodrop__free { color: hsl(38 18% 70%); }

  .hero--sun .hero__go {
    background: hsl(38 34% 95%); color: hsl(24 32% 11%);
    box-shadow: 0 14px 30px -14px hsl(0 0% 0% / .7), inset 0 1px 0 hsl(0 0% 100% / .6); }
  .hero--sun .hero__go:hover { background: hsl(42 62% 74%); }
  .hero--sun .shootrow__or { color: hsl(38 18% 70%); }
  .hero--sun .btn-shoot {
    border-color: hsl(38 26% 72% / .32); background: hsl(38 30% 88% / .05);
    color: hsl(38 30% 86%); }
  .hero--sun .btn-shoot:hover { border-color: hsl(42 58% 58%); color: hsl(42 66% 78%); }

  .hero--sun .gold, .hero--sun em.gold,
  .section--plaster .gold, .section--plaster em.gold { color: hsl(var(--gold-lit)); }

  .hero--sun .eyebrow, .section--plaster .eyebrow { color: hsl(var(--gold-lit)); }
  .hero--sun .lede, .hero--sun .hero__price,
  .section--plaster .lede, .section--plaster p { color: hsl(var(--ink-soft)); }
  .hero--sun .hero__price b { color: hsl(var(--ink)); }
  .hero--sun .shootrow__or, .section--plaster .shootrow__or { color: hsl(var(--ink-soft)); }
  .hero--sun .ba__cap, .section--plaster .ba__cap,
  .hero--sun .lifestyle-note, .section--plaster .lifestyle-note { color: hsl(var(--ink-soft)); }
  .hero--sun .herodrop__or, .section--plaster .herodrop__or { color: hsl(var(--ink-soft)); }
  .hero--sun .herodrop__or a, .section--plaster .herodrop__or a { color: hsl(var(--gold-lit)); }
  .section--plaster .step__n { color: hsl(var(--ink-soft)); }

  .section--plaster .styletog:not(.is-on) small,
  .hero--sun small:not(.styletog.is-on small) { color: hsl(var(--ink-soft)); }
  .hero--sun .drop h3, .hero--sun .drop p { color: hsl(var(--ink)); }
  .hero--sun .drop p, .hero--sun .drop span { color: hsl(var(--ink-soft)); }

  .freefirst { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    margin-top: 1.5rem; padding: 1rem 1.15rem; border-radius: var(--radius);
    border: 1px solid hsl(var(--gold) / .35);
    background: radial-gradient(ellipse 90% 100% at 20% 0%, hsl(var(--gold) / .1), transparent 70%), hsl(var(--card) / .5); }
  .freefirst > div { flex: 1 1 240px; min-width: 0; }
  .freefirst b { display: block; font-family: var(--font-display); font-size: 1.0625rem; color: hsl(var(--gold)); }
  .freefirst span { display: block; margin-top: .2rem; font-size: .75rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }

  .pcard { border: 1px solid hsl(var(--border)); border-radius: var(--r); overflow: hidden;
    background: hsl(var(--card) / .55); transition: border-color var(--t-slow) var(--ease); }
  .pcard:hover { border-color: hsl(var(--gold) / .45); }
  .pcard.is-owned { border-color: hsl(var(--gold) / .35); }
  .pcard__img { position: relative; }
  .pcard__img img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; }

  .pcard__mark { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
    font-family: var(--font-display); font-size: 1.125rem; letter-spacing: .34em; text-transform: uppercase;
    color: hsl(38 40% 97% / .9); -webkit-text-stroke: 1px hsl(24 30% 8% / .55);
    text-shadow: 0 2px 10px hsl(0 0% 0% / .45); transform: rotate(-24deg); }
  .pcard:not(.is-owned) .pcard__img::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(-24deg, hsl(38 40% 96% / .06) 0 2px, transparent 2px 24px); }
  .pcard__owned { position: absolute; top: .6rem; left: .6rem; padding: .2rem .55rem; border-radius: var(--r);
    background: hsl(var(--gold)); color: hsl(var(--charcoal));
    font-size: .5rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
  .pcard figcaption { padding: .9rem 1rem 1rem; }
  .pcard figcaption b { display: block; font-family: var(--font-body); font-size: 1.125rem; font-weight:600; line-height:1.35; overflow-wrap:anywhere; }
  .pcard figcaption > span { display: block; margin-top: .1rem; font-size: .6875rem;
    letter-spacing: .04em; color: hsl(var(--muted-foreground)); }
  .pcard__act { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .8rem; }
  .pcard__act button { flex: 1 1 auto; white-space: nowrap; }

  .lookup { margin-top: 2.5rem; padding: 1.35rem 1.4rem; border: 1px solid hsl(var(--border));
    border-radius: var(--radius); background: hsl(var(--card) / .45); }
  .lookup__k { font-size: .5625rem; letter-spacing: .24em; text-transform: uppercase; color: hsl(var(--gold)); }
  .lookup__p { margin-top: .6rem; font-size: .8125rem; line-height: 1.7; color: hsl(var(--muted-foreground)); max-width: 62ch; }
  .lookup__row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
  .lookup__row input { flex: 1 1 180px; min-width: 0; padding: .6rem .8rem; background: hsl(var(--background));
    border: 1px solid hsl(var(--border)); color: hsl(var(--foreground));
    font-family: var(--font-body); font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; }
  .lookup__row input:focus { outline: none; border-color: hsl(var(--gold) / .6); }
  .lookup__row input:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 2px; }
  .lookup__out { margin-top: .8rem; padding: .6rem .75rem; border-left: 2px solid hsl(var(--terracotta));
    background: hsl(16 40% 20% / .28); font-size: .8125rem; line-height: 1.6; color: hsl(36 30% 84%); }
  .lookup__out.is-ok { border-left-color: hsl(var(--gold)); background: hsl(42 40% 22% / .25); }

  .legal { max-width: 74ch; }
  .legal__tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 2.5rem;
    padding-bottom: 1rem; border-bottom: 1px solid hsl(var(--border)); }
  .legal__tabs a { padding: .45rem .8rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius);
    font-size: .625rem; letter-spacing: .16em; text-transform: uppercase;
    color: hsl(var(--muted-foreground)); transition: all var(--t) var(--ease); }
  .legal__tabs a:hover { border-color: hsl(var(--gold) / .5); color: hsl(var(--foreground)); }
  .legal__tabs a.is-on { background: transparent; border-color: hsl(var(--gold)); color: hsl(var(--gold)); }
  .legal__h { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.15; }
  .legal__meta { margin-top: .6rem; font-size: .6875rem; letter-spacing: .14em;
    text-transform: uppercase; color: hsl(var(--muted-foreground)); }
  .legal__body section { margin-top: 2.25rem; }
  .legal__body h2 { font-family: var(--font-display); font-size: 1.25rem; color: hsl(var(--gold)); }
  .legal__body p { margin-top: .6rem; font-size: .9375rem; line-height: 1.85; color: hsl(var(--foreground) / .88); }
  .legal__foot { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid hsl(var(--border));
    font-size: .8125rem; color: hsl(var(--muted-foreground)); }

  mark.todo { background: hsl(var(--terracotta) / .22); color: hsl(16 70% 72%);
    padding: .05em .35em; border-radius: var(--r); border: 1px dashed hsl(var(--terracotta) / .6);
    font-family: var(--font-body); font-size: .82em; letter-spacing: .06em; }

  .tally__approx { margin-top: .3rem; text-align: right; font-size: .6875rem; color: hsl(var(--muted-foreground)); }
  .madeby { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid hsl(var(--border));
    font-size: .75rem; line-height: 1.7; color: hsl(var(--muted-foreground)); max-width: 66ch; }
  .proof-approval { margin-top: 1rem; display: flex; align-items: flex-start; gap: .75rem;
    max-width: 66ch; padding: .9rem 1rem; border: 1px solid hsl(var(--gold) / .28);
    border-radius: var(--radius); background: hsl(var(--gold) / .055); cursor: pointer; }
  .proof-approval input { width: 1.05rem; height: 1.05rem; margin-top: .15rem; accent-color: hsl(var(--gold)); flex: 0 0 auto; }
  .proof-approval span { font-size: .8125rem; line-height: 1.55; color: hsl(var(--foreground) / .92); }
  .proof-approval.is-bad { border-color: hsl(var(--terracotta)); background: hsl(16 40% 20% / .25); }
  .field2 { display: grid; gap: .75rem; grid-template-columns: 1fr; }
  @media (min-width: 520px) { .field2 { grid-template-columns: 2fr 1fr; } }
  .field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: hsl(var(--terracotta)); }

  .drop__err, .pay-err { margin-top: .75rem; padding: .65rem .8rem;
    border-left: 2px solid hsl(var(--terracotta)); background: hsl(16 40% 20% / .3);
    font-size: .8125rem; line-height: 1.6; color: hsl(36 32% 86%); text-align: left; }

  @media (min-width: 900px) {
    #ord-grid { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 3.5rem; }
  }

  .receipt { margin-top: 1.75rem; padding: 1.25rem 1.35rem; border: 1px solid hsl(var(--border));
    border-radius: var(--radius); background: hsl(var(--card) / .55); }
  .receipt__k { font-size: .5625rem; letter-spacing: .24em; text-transform: uppercase;
    color: hsl(var(--gold)); margin-bottom: .5rem; }
  .receipt__rows .rev-line { display: flex; justify-content: space-between; gap: 1rem;
    padding-block: .45rem; font-size: .8125rem; }
  .receipt__rows .rev-line + .rev-line { border-top: 1px solid hsl(var(--border)); }
  .receipt__rows .rev-line span:first-child { color: hsl(var(--muted-foreground)); }
  .receipt__total { display: flex; justify-content: space-between; align-items: baseline;
    margin-top: .8rem; padding-top: .8rem; border-top: 1px solid hsl(var(--border)); }
  .receipt__total span:first-child { font-size: .5625rem; letter-spacing: .24em;
    text-transform: uppercase; color: hsl(var(--muted-foreground)); }
  .receipt__total span:last-child { font-family: var(--font-display); font-size: 1.5rem; color: hsl(var(--gold)); }
  .receipt__eta { margin-top: .9rem; font-size: .75rem; color: hsl(var(--foreground)); }
  .receipt__terms { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid hsl(var(--border));
    font-size: .6875rem; line-height: 1.7; color: hsl(var(--muted-foreground)); }
  .field textarea { resize: vertical; min-height: 72px; }
  .trust { margin-top: 1rem; font-size: .6875rem; line-height: 1.8; color: hsl(var(--muted-foreground)); text-align: center; }

  .order-wrap { max-width: 860px; margin: 0 auto; padding-block: 3rem; }
  .timeline { margin-top: 2rem; display: flex; flex-direction: column; gap: 0; }
  .tl { display: grid; grid-template-columns: 28px 1fr; gap: 1rem; padding-bottom: 1.75rem; position: relative; }
  .tl:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 24px; bottom: 0; width: 1px; background: hsl(var(--border)); }
  .tl__dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); font-size: .6875rem; color: hsl(var(--muted-foreground)); position: relative; z-index: 1; }
  .tl.is-done .tl__dot { border-color: hsl(var(--gold)); background: hsl(var(--gold)); color: hsl(var(--charcoal)); }
  .tl.is-now .tl__dot { border-color: hsl(var(--gold)); color: hsl(var(--gold)); }
  .tl b { font-family: var(--font-display); font-size: 1.125rem; font-weight: 400; }
  .tl p { margin-top: .2rem; font-size: .8125rem; color: hsl(var(--muted-foreground)); }

  .studio-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
  #paintings-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1.75rem; }
  .collection-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem;
    margin: 0 0 1.5rem; }
  .collection-filters[hidden] { display: none; }
  .collection-filters button { flex: none; min-height: 44px; padding: 0 .9rem; border: 1px solid hsl(var(--border));
    border-radius: var(--r-pill); background: none; color: hsl(var(--muted-foreground));
    font-size: .625rem; letter-spacing: .13em; text-transform: uppercase;
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
  .collection-filters button:hover { border-color: hsl(var(--gold) / .45); color: hsl(var(--foreground)); }
  .collection-filters button.is-on { border-color: hsl(var(--gold)); background: hsl(var(--gold) / .1); color: hsl(var(--gold)); }
  .collection-filters button:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 2px; }
  .studio-sync { margin: .9rem auto 0; max-width: 54ch; text-align: center; font-size: .75rem;
    line-height: 1.7; color: hsl(var(--muted-foreground)); }

  .ledger__k { margin: 2rem 0 .6rem; font-size: .625rem; letter-spacing: .2em;
    text-transform: uppercase; color: hsl(var(--muted-foreground)); text-align: center; }

  .btn-danger { padding: 0.625rem 1.125rem; background: none; cursor: pointer; font-family: var(--font-sans);
    border: 1px solid hsl(var(--terracotta) / .5); border-radius: var(--r); color: hsl(var(--terracotta));
    font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase;
    transition: background var(--t-fast) var(--ease); }
  .btn-danger:hover { background: hsl(var(--terracotta) / .12); }
  .btn-danger:focus-visible { outline: 2px solid hsl(var(--terracotta)); outline-offset: 2px; }

  .eyebrow--who { letter-spacing: .08em; text-transform: none; font-size: .75rem; }

  .studio-tabs button { font-size: .6875rem; letter-spacing: .16em; padding: .6rem 1.25rem; min-height: 44px; }
  .studio-tabs button.is-on { background: hsl(var(--gold) / .12); }

  .pane-act { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-bottom: 1.1rem; padding-bottom: .8rem; border-bottom: 1px solid hsl(var(--border)); }
  .pane-act[hidden] { display: none; }
  .pane-act__n { margin: 0; font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
    color: hsl(var(--muted-foreground)); }

  .sitem__st { display: inline-block; margin-bottom: .4rem; padding: .18rem .5rem;
    font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; border-radius: var(--r); }
  .sitem__st--good { background: hsl(var(--gold) / .18); color: hsl(var(--gold-light, var(--gold)));
    border: 1px solid hsl(var(--gold) / .45); }
  .sitem__st--wait { background: hsl(var(--terracotta) / .18); color: hsl(var(--terracotta));
    border: 1px solid hsl(var(--terracotta) / .45); }
  .sitem__where { display: block; font-size: .8125rem; color: hsl(var(--foreground) / .8); }

  .sitem__meta { display: block; margin-top: .15rem; font-size: .6875rem;
    letter-spacing: normal; text-transform: none; color: hsl(var(--muted-foreground)); }
  .sitem__track { display: block; margin: .2rem .9rem .8rem; min-height: 44px; padding-top: .65rem;
    font-size: .6875rem; color: hsl(var(--gold));
    text-decoration: underline; text-underline-offset: 3px; }

  .pcard.is-clean .pcard__mark { display: none; }
  .pcard .pcard__gone-act.is-expired { display:flex; }
  .pcard__expiry { font-size:.8125rem; line-height:1.5; margin-top:.6rem; }
  .pcard__details { margin:.4rem 0 0; font-size:.75rem; line-height:1.6; color:hsl(var(--muted-foreground)); }

  .pcard__gone { display: none; font-size: .75rem; line-height: 1.55; color: hsl(var(--muted-foreground)); margin: .35rem 0 0; }
  .pcard__gone-act { display: none; margin-top: .8rem; }
  .pcard.is-gone .pcard__img { display: none; }
  .pcard.is-gone .pcard__gone { display: block; }
  .pcard.is-gone .pcard__gone-act { display: flex; }
  .pcard.is-gone .pcard__act { display: none; }
  .pcard.is-gone.is-owned .pcard__act { display: flex; }
  .sitem { border: 1px solid hsl(var(--border)); background: hsl(var(--card)); overflow: hidden; transition: all var(--t) var(--ease); display: block; }
  .sitem:hover { border-color: hsl(var(--gold) / .4); }
  .sitem figure { aspect-ratio: 4/5; overflow: hidden; }
  .sitem img { width: 100%; height: 100%; object-fit: cover; }
  .sitem figcaption { padding: .85rem .9rem 1rem; }
  .sitem b { display: block; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 400; }
  .sitem span { display: block; margin-top: .15rem; font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }

  #studio-grid { grid-template-columns: 1fr; max-width: 900px; margin-inline: auto; }
  #studio-grid .sitem { display: block; }
  #studio-grid .sitem__main { display: grid; grid-template-columns: 92px minmax(0,1fr); color: inherit; }
  #studio-grid .sitem figure { aspect-ratio: 1; }
  #studio-grid .sitem figcaption { align-self: center; }
  @media (min-width: 700px) {
    #studio-grid .sitem__main { grid-template-columns: 124px minmax(0,1fr); }
  }

  .empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: min(34vh, 280px); padding: 2rem 1rem 3.5rem; text-align: center;
    color: hsl(var(--muted-foreground));
  }

  .empty__h {
    margin: 0; font-family: var(--font-display); font-weight: 300;
    font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.12; letter-spacing: -.01em;
    color: hsl(var(--foreground));
  }
  .empty__p { margin: .75rem 0 0; max-width: 34ch; font-size: .875rem; line-height: 1.75; }
  .empty .btn-atlas { margin-top: 1.75rem; }

  .room { position: relative; z-index: 2; }
  .room--first { padding-block: 5rem 2rem; border-top: 1px solid hsl(var(--border));
    background: linear-gradient(105deg, hsl(var(--card)), hsl(var(--background))); }
  .room--second { padding-block: 2rem 5rem; border-bottom: 1px solid hsl(var(--border));
    background: linear-gradient(105deg, hsl(var(--card)), hsl(var(--background))); }
  @media (max-width: 760px) {
    .room--first { padding-block: 4rem 1.5rem; }
    .room--second { padding-block: 1.5rem 4rem; }
  }
  .room__head { display: flex; flex-wrap: wrap; align-items: flex-end;
    justify-content: space-between; gap: 1rem 2rem; }
  .room__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem; }
  .room__say { max-width: 46ch; }
  .room__h { margin: .35rem 0 0; font-family: var(--font-display); font-weight: 300;
    font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.08; letter-spacing: -.012em; }
  .room__h em { font-style: italic; }
  .room__sub { margin: .55rem 0 0; font-size: .9375rem; color: hsl(var(--muted-foreground)); }

  .room__cta { flex: none; display: inline-flex; align-items: center; gap: .55rem;
    padding: .8rem 1.4rem; border-radius: var(--r); border: 1px solid transparent;
    background: hsl(var(--foreground)); color: hsl(var(--background));
    font-size: .875rem; font-weight: 500; white-space: nowrap;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
  .room__cta:hover { background: hsl(var(--gold)); color: hsl(var(--charcoal)); }
  .room__cta:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 3px; }

  .room__wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1rem; margin-top: 2rem; }
  @media (min-width: 640px) { .room__wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; } }
  .room__slider-controls { display: none; }
  @media (min-width: 0px) {
    .room__wall { grid-template-columns: none; grid-auto-flow: column;
      grid-auto-columns: clamp(180px, 18vw, 220px); gap: 1.5rem;
      overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
      padding: 4px 4px 12px; scroll-padding-inline: 4px; scrollbar-width: thin; scrollbar-color: hsl(var(--gold) / .5) transparent; }
    .room__wall:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 4px; }
    .room__wall .room__card { scroll-snap-align: start; }
    .room__wall .room__card h3 { font-size: 1.25rem; }
    .room__slider-controls { display: flex; align-items: center; gap: .5rem; }
    .room__slider-controls button { width: 44px; height: 44px; border: 1px solid hsl(var(--border));
      border-radius: var(--r); background: hsl(var(--card)); color: hsl(var(--gold)); font-size: 1.25rem; }
    .room__slider-controls button:disabled { opacity: .35; cursor: default; }
    .room__slider-controls button:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 3px; }
    .room__slider-count { min-width: 5rem; text-align: center; font-size: .75rem; color: hsl(var(--muted-foreground)); }
  }

  .room__card { display: block; min-width: 0; scroll-margin-top: 6rem; }

  .room__card img { display: block; width: 100%; height: auto; aspect-ratio: 3/4; object-fit: contain;
    border: 1px solid hsl(var(--border)); background: hsl(var(--card));
    transition: border-color var(--t) var(--ease); }
  .room__card:hover img { border-color: hsl(var(--gold) / .45); }
  .room__card:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 3px; }
  .room__card h3 { margin: .6rem 0 0; font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.2; color: hsl(var(--foreground)); }
  .room__card p { margin: .25rem 0 0; font-size: .6875rem; letter-spacing: .08em;
    text-transform: uppercase; line-height: 1.5; color: hsl(var(--muted-foreground)); }

  .room__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }

  .room__chips a { display: inline-flex; align-items: center; min-height: 44px;
    padding: 0 1.1rem; border: 1px solid hsl(var(--border));
    border-radius: var(--r-pill); font-size: .625rem; letter-spacing: .14em;
    text-transform: uppercase; color: hsl(var(--muted-foreground));
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
  .room__chips a:hover { border-color: hsl(var(--gold) / .45); color: hsl(var(--foreground)); }
  .room__chips a:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 2px; }

  .reasons { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
  @media (min-width: 900px) { .reasons { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
  .reasons__col { display: flex; flex-direction: column; gap: 1.5rem; }
  .reasons__k { margin: 0; font-size: .625rem; letter-spacing: .22em; text-transform: uppercase;
    color: hsl(var(--muted-foreground)); }
  .reasons__subhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .why-slider { display: grid; grid-auto-flow: column; grid-auto-columns: 88%; gap: 1rem; overflow-x: auto;
    overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    scroll-padding-inline: 0; -webkit-overflow-scrolling: touch; }
  .why-slider::-webkit-scrollbar { display: none; }
  .why-slider:focus-visible { outline: 2px solid hsl(var(--gold) / .7); outline-offset: 6px; }
  .why-slider .why { scroll-snap-align: center; text-align: center; }
  .why-slider .why > p:last-child { max-width: 34ch; margin-inline: auto; }
  @media (max-width: 899px) { .why-slider { grid-auto-columns: 100%; } }
  .reasons__col .why-note { margin-top: .5rem; text-align: center; }

  .why__media { position: relative; display: grid; place-items: center;
    width: min(68%, 272px); aspect-ratio: 1; margin: 0 auto 1rem; padding: .7rem;
    overflow: hidden; border: 1px solid hsl(var(--gold) / .46);
    background-color: hsl(var(--zellij-green)); background-image: var(--rosette-art);
    background-size: 38px 38px; }
  .why__media::before { content: ""; position: absolute; inset: .38rem;
    border: 1px solid hsl(var(--gold) / .44); pointer-events: none; }
  .why__media img { position: absolute; z-index: 1; inset: .7rem; display: block;
    width: calc(100% - 1.4rem); height: calc(100% - 1.4rem);
    object-fit: contain; object-position: center;
    border: 1px solid hsl(var(--gold) / .28);
    background: hsl(var(--background));
    transition: filter var(--t-slow) var(--ease); }
  .why:hover .why__media img { filter: brightness(1.06); }
  .why--occasion { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 1rem; align-items: start; }
  .why__occasion-media { display: block; width: 112px; aspect-ratio: 4 / 5; padding: .35rem;
    border: 1px solid hsl(var(--gold) / .38); background: var(--cta-zellij) center / 34px 34px; }
  .faq__more { margin: .5rem 0 0; font-size: 13px; line-height: 1.5; }
  .faq__more a { color: hsl(var(--gold)); text-decoration: underline; text-underline-offset: 3px; }
  .why__more { margin: .55rem 0 0; font-size: 13px; line-height: 1.5; }
  .why__more a { color: hsl(var(--gold)); text-decoration: underline; text-underline-offset: 3px; }
  .why__occasion-media img { display: block; width: 100%; height: 100%; object-fit: cover;
    border: 1px solid hsl(var(--background)); background: hsl(var(--card)); }
  .why__occasion-copy { min-width: 0; }
  .why--occasion .btn-quiet { margin-top: .8rem; }
  @media (max-width: 520px) {
    .why--occasion { grid-template-columns: 96px minmax(0, 1fr); gap: .85rem; }
    .why__occasion-media { width: 96px; }
    .why--occasion .why__lead { font-size: 1.2rem; }
  }

  .js-anim .reasons.is-in .why { animation: whyIn .6s cubic-bezier(.4,0,.2,1) both; }
  .js-anim .reasons.is-in .reasons__col:nth-child(2) .why { animation-delay: .12s; }
  @media (prefers-reduced-motion: reduce) {
    .js-anim .reasons.is-in .why { animation: none; }
  }

  .framewrap { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid hsl(var(--border)); }
  .framewrap__k { margin: 0 0 2rem; text-align: center; font-size: .625rem; letter-spacing: .22em;
    text-transform: uppercase; color: hsl(var(--gold)); }
  #formats .newstudio { margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid hsl(var(--border));
    max-width: none; }
  #formats .newstudio .reasons__k { margin-bottom: 0; }

  .prf { position: relative; margin: 0; overflow: hidden; border: 1px solid hsl(var(--border));
    background: hsl(var(--card)); }
  .prf > picture img { display: block; width: 100%; height: auto; aspect-ratio: 3/4; object-fit: contain; }
  .prf__cap { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: .85rem;
    padding: 3.5rem 1rem 1rem;
    background: linear-gradient(180deg, transparent, hsl(24 34% 6% / .55) 38%, hsl(24 34% 6% / .93)); }
  .prf__src { flex: none; width: 68px; height: 68px; padding: 0; border-radius: 50%; overflow: hidden; cursor: zoom-in;
    border: 2px solid hsl(38 50% 92% / .9); box-shadow: 0 6px 16px -6px hsl(0 0% 0% / .8); }
  .prf__src:hover { border-color: hsl(var(--gold-light)); }
  .prf__src:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 3px; }
  .prf__src img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .prf__say { min-width: 0; }
  .prf__say b { display: block; font-family: var(--font-display); font-style: italic;
    font-size: 1.0625rem; font-weight: 400; line-height: 1.2; color: hsl(38 52% 94%); }
  .prf__say em { display: block; margin-top: .25rem; font-style: normal; font-size: .5625rem;
    letter-spacing: .18em; text-transform: uppercase; color: hsl(42 45% 76%); }
  @media (max-width: 640px) {
    .prf__src { width: 56px; height: 56px; }
    .prf__say b { font-size: .9375rem; }
  }
  .original-viewer { position: fixed; inset: 0; width: min(88vw, 620px); max-height: 88vh;
    margin: auto; padding: 0; overflow: visible;
    border: 1px solid hsl(var(--border)); background: hsl(var(--card)); box-shadow: var(--shadow-elevated); }
  .original-viewer::backdrop { background: hsl(var(--background) / .88); backdrop-filter: blur(8px); }
  .original-viewer img { display: block; width: 100%; max-height: 82vh; object-fit: contain; }
  .original-viewer__close { position: absolute; top: .6rem; right: .6rem; width: 44px; height: 44px;
    display: grid; place-items: center; border: 1px solid hsl(var(--border)); background: hsl(var(--background) / .84);
    color: hsl(var(--foreground)); font-size: 1.25rem; cursor: pointer; }
  .original-viewer__close:hover { border-color: hsl(var(--gold)); color: hsl(var(--gold)); }

  .why-grid { display: grid; gap: 1.5rem; }
  @media (min-width: 820px) { .why-grid { grid-template-columns: repeat(3, 1fr); gap: 2.25rem; } }
  .why { padding-top: 1.1rem; border-top: 1px solid hsl(var(--gold) / .28); }
  .why__k { margin: 0 0 .5rem; font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
    color: hsl(var(--gold)); font-family: var(--font-sans); }

  .why .why__lead { margin: 0 0 .55rem; font-family: var(--font-display); font-size: 1.375rem;
    line-height: 1.25; color: hsl(var(--foreground)); text-wrap: balance; }
  .why p { margin: 0; font-size: .8125rem; line-height: 1.75; color: hsl(var(--muted-foreground)); }

  .js-anim .why-grid.is-in .why { animation: whyIn .6s cubic-bezier(.4,0,.2,1) both; }
  .js-anim .why-grid.is-in .why:nth-child(2) { animation-delay: .12s; }
  .js-anim .why-grid.is-in .why:nth-child(3) { animation-delay: .24s; }
  @keyframes whyIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .js-anim .why-grid.is-in .why { animation: none; }
  }
  .why .btn-quiet { margin-top: 1.1rem; }
  .why em { font-style: italic; color: hsl(var(--foreground)); }
  .why-note { margin-top: 2.5rem; text-align: center; font-family: var(--font-display);
    font-size: 1.0625rem; font-style: italic; color: hsl(var(--muted-foreground)); }

  #faq .faq__support-only { display: none; }
  #faq .faq.is-expanded .faq__support-only { display: block; }
  .faq__more { margin-top: 1.5rem; text-align: center; }

  .story-row { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .7rem; }
  .story-pill { padding: .22rem .5rem; font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; border: 1px solid hsl(var(--gold) / .3); color: hsl(var(--gold)); }
  .story-hist { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid hsl(var(--border)); font-size: .75rem; line-height: 1.7; color: hsl(var(--muted-foreground)); }
  .story-why { margin-top: .5rem; font-family: var(--font-display); font-style: italic; font-size: .8125rem; line-height: 1.6; color: hsl(var(--foreground) / .9); }

  .flow-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; padding-block: 3rem 5rem; }

  .btn-atlas {
    box-shadow: 0 10px 24px -12px hsl(42 52% 30% / .75), inset 0 1px 0 hsl(45 60% 72% / .5);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
  }
  .btn-atlas:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px hsl(42 52% 30% / .85); filter: brightness(1.04); }
  .btn-atlas:active { transform: translateY(0); box-shadow: 0 6px 14px -10px hsl(42 52% 30% / .8); }

  .btn-ghost-gold { box-shadow: none; }

  a:focus-visible, button:focus-visible, label:focus-within,
  input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid hsl(var(--gold)); outline-offset: 2px;
  }

  .herodrop {
    border-style: solid; border-color: hsl(16 55% 52% / .45);
    background:
      radial-gradient(120% 100% at 50% 0%, hsl(38 62% 97% / .95), hsl(36 48% 92% / .92));
    box-shadow: 0 18px 40px -24px hsl(20 50% 25% / .5);
  }
  .herodrop:hover, .herodrop.is-over {
    border-color: hsl(16 68% 45%);
    box-shadow: 0 22px 46px -20px hsl(20 50% 25% / .62);
  }

  .hero__go {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%; margin-top: .7rem; min-height: 52px; padding: 0 1.4rem;
    border: 0; cursor: pointer;
    background: hsl(16 64% 42%); color: hsl(38 70% 98%);

    border-radius: var(--r); font-family: var(--font-body); font-size: 1rem;
    letter-spacing: .06em; text-transform: uppercase; font-weight: 500;
    box-shadow: 0 12px 26px -12px hsl(16 62% 30% / .85), inset 0 1px 0 hsl(20 70% 66% / .55);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  }
  .hero__go:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -12px hsl(16 62% 30% / .9); }
  .hero__go:focus-visible { outline: 3px solid hsl(16 68% 42%); outline-offset: 3px; }

  @media (max-width: 359px) {
    .hero__go { padding: 0 .9rem; font-size: .9375rem; gap: .4rem; }
  }

  .herodrop .herodrop__free { margin-top: .55rem; font-size: .6875rem; letter-spacing: .12em;
    text-transform: uppercase; color: hsl(24 24% 30%); }

  .btn-shoot { opacity: .82; }
  .btn-shoot:hover { opacity: 1; }

  .acct__signin { font-weight: 400; }

  .standing {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: .7rem 16px calc(.7rem + env(safe-area-inset-bottom));
    background: linear-gradient(transparent, hsl(30 18% 5% / .9) 30%, hsl(30 18% 5%));
    transform: translateY(120%); transition: transform var(--t) var(--ease);
  }
  .standing.is-up { transform: translateY(0); }

  .standing.is-frame-clear { transform: translateY(120%); pointer-events: none; }

  .standing[hidden] { display: none; }
  .standing__btn {
    position: relative; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: .1rem; min-height: 56px; padding: .55rem 1rem;
    border-radius: var(--r); cursor: pointer;
    background: hsl(16 64% 42%); color: hsl(38 70% 98%);
    box-shadow: 0 14px 30px -12px hsl(16 62% 22% / .95), inset 0 1px 0 hsl(20 70% 66% / .5);
  }
  .standing__btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .standing__btn span { font-size: .9375rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
  .standing__btn em { font-style: normal; font-size: .625rem; letter-spacing: .14em;
    text-transform: uppercase; opacity: .82; }
  @media (min-width: 900px) { .standing { display: none; } }

  @media (max-width: 899px) {

    .site-footer { padding-bottom: calc(4.9rem + env(safe-area-inset-bottom)); }
  }
  @media (prefers-reduced-motion: reduce) { .standing { transition: none; } }

  @media (max-width: 640px) {
    .hero__say h1 { font-size: clamp(2.3125rem, 12vw, 3.125rem); line-height: 1.04; }
    .hero .lede { margin-top: 1rem; }
    .hero__price { margin-top: .8rem; font-size: .875rem; }

    .hero .ba { margin-top: 1.25rem; }

    .ba__shot { aspect-ratio: 3 / 4; height: auto; max-height: 260px; }

    .ba__shot img { object-position: 50% 42%; }
    .ba__shot img { height: 100%; object-fit: cover; }
    .ba__cap { margin-top: .4rem; }
    .herodrop { margin-top: 1.1rem; padding: 1.25rem 1.1rem 1.4rem; }
    .herodrop__ico { width: 28px; height: 28px; margin-bottom: .4rem; }
    .herodrop strong { font-size: 1.25rem; }
    .hero__go { margin-top: .8rem; }
  }

  @media (max-width: 760px) {
    .payrow {
      position: sticky; bottom: 0; z-index: 20;
      margin-inline: -20px; padding: .9rem 20px calc(.9rem + env(safe-area-inset-bottom));
      background: linear-gradient(transparent, hsl(var(--background) / .92) 22%, hsl(var(--background)));
      backdrop-filter: blur(4px);
    }
    .payrow .trust { margin-top: .5rem; }
    #pane-3 .deck__body, #pane-3 { padding-bottom: 1rem; }
    .view.is-step3 .stage { width: 100%; max-width: none; }
    .view.is-step3 .wall { min-height: 0; padding: 1rem; }
    .view.is-step3 .stage.is-proof .wall__art { width: min(92%, 360px) !important; }
    .proof-viewer { width: 100vw; height: 100dvh; border: 0; }
    .proof-viewer__canvas img { max-width: 100%; max-height: 100%; }
  }

  @media (max-width: 760px) {
    .eyebrow, .deck__k, .format__k, .framer__k, .reasons__k, .why__k,
    .stylepick__k, .field label, .step-label, .cur__qs-count, .framer__count,
    .detail__k, .index__head p { font-size: .75rem; letter-spacing: .14em; }
  }

  @media (pointer: coarse) {
    .btn-quiet { display: inline-flex; align-items: center; min-height: 46px; }
    .filmbtn { min-height: 44px; }
    .btn-sm { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .framer__toggle button { min-height: 44px; padding-inline: 1.05rem; }
    #auth-swap { min-height: 44px; padding-inline: .5rem; }
    .site-footer a { display: inline-block; padding-block: .95rem; }
    .cur__q { min-height: 44px; }
    .cur__tabs button { min-height: 44px; }

    .detail__close { width: 46px; height: 46px; font-size: .875rem; }
    .mapexit { min-height: 44px; }
    .btn-shoot { min-height: 44px; }
    .herodrop__or { line-height: 1.2; }
    .herodrop__or a { display: inline-block; padding-block: 1rem; }

    .acct__signin { min-height: 44px; }
    .menubtn { min-width: 44px; min-height: 44px; }

    @media (max-width: 360px) {
      .acct__signin { padding-inline: .7rem; letter-spacing: .08em; }
      .site-header__inner { gap: 6px; }
    }
    .wordmark { display: inline-flex; align-items: center; min-height: 44px; }

    .chip, .size-chip, [data-size], [data-frame] { min-height: 46px; }

    #steps-rail a, #steps-rail button, .steps-rail a, .steps-rail button { min-height: 44px; }
    .placechip__go { min-height: 44px; }

    [data-qty], .qty button, .qtyrow button { min-width: 44px; min-height: 44px; }

    .field input, .field select, .field textarea { min-height: 48px; }

    #pet-name { min-height: 48px; }
    .framer__toggle button { min-height: 46px; }

    .giftbox__on, .giftbox__hide, .memo { display: flex; align-items: center; min-height: 46px; }
    .giftbox__on input, .giftbox__hide input, .memo input { width: 22px; height: 22px; }
    .opts__row button, [aria-label='Search places'], #picker-open { min-height: 44px; }
  }

  .signature-work { position: relative; z-index: 2; order: 2; width: 100%; max-width: 820px;
    display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 1.5rem auto 0; }
  .signature-work__card { padding: 0; border: 1px solid hsl(var(--gold) / .3); border-radius: var(--r);
    background: hsl(var(--card)); color: hsl(var(--foreground)); overflow: hidden; cursor: pointer;
    transition: transform var(--t) var(--ease), border-color var(--t) var(--ease); }
  .signature-work__card:hover { transform: translateY(-4px); border-color: hsl(var(--gold)); }
  .signature-work__card:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 4px; }
  .signature-work__card img { display: block; width: 100%; height: auto; aspect-ratio: 3/4; object-fit: contain; }
  .signature-work__card span { display: block; padding: 10px 4px; font: 500 15px var(--font-display); }
  .hero__band { order: 3; }
  .hero > #styles { order: 4; }
  .how__media > picture { display: block; width: 100%; }
  .how__media > picture img { display: block; width: 100%; height: auto; object-fit: contain; }
  @media(max-width:700px) {
    .signature-work { display: flex; gap: 10px; margin-top: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
    .signature-work__card { flex: 0 0 34%; scroll-snap-align: center; }
    .signature-work__card span { font-size: 12px; padding: 8px 3px; }
  }

  .cur__visual { padding: 0; background: none; }
  .why__media { padding: 0; border: 0; background: none; }
  .why__media::before { display: none; }
  .why__media img { inset: 0; width: 100%; height: 100%; border: 0; background: none; }
  .why__occasion-media { padding: 0; border: 0; background: none; }
  .why__occasion-media img { border: 0; object-fit: contain; background: none; }
  .artwork-sheet { padding: 0; background: none; }
  .artwork-sheet img { display: block; width: 100%; height: auto; object-fit: contain; }
  .pin__reveal-frame { padding: 0; background: none; clip-path: none; }
  .pin__reveal-frame img { clip-path: none; }
  .wall__art:not(.pd-frame) > .pd-rail { display: none; }
  .wall__art.pd-frame { box-sizing: border-box; border: 0; padding: 0; max-width: 100%; }
  .wall__art.pd-frame .pd-aperture img { aspect-ratio: auto; border: 0; height: 100%; object-fit: contain; }
  .fr.pd-frame { border-radius: 0; }
  .pd-reference[hidden] { display: none; }
  .framer__controls .pd-reference { max-width: 360px; }
  @media (max-width: 640px) {
    .framer__controls .pd-reference img { width: 36px; height: 60px; }
    .framer__controls .pd-reference { gap: .65rem; padding: .6rem; }
    .framer__controls .pd-reference p { font-size: .75rem; }
  }

  @media (max-width: 420px) {

    .site-header__inner .wordmark { font-size: 15px; flex: none; }
    .site-header__inner .acct { min-width: 0; flex-shrink: 1; }
    .site-header__inner .acct__signin { white-space: normal; padding-inline: 4px; }
    .site-header__inner .menubtn { padding-inline: 11px; }
  }
  .btn-ghost-gold::after { display: none; }
  .hero__go { text-transform: none; letter-spacing: .01em; font-weight: 600; font-size: 1.0625rem; }
  .btn-shoot { text-transform: none; letter-spacing: .01em; font-size: .875rem; font-weight: 500; opacity: 1; }
  .herodrop .herodrop__free { text-transform: none; letter-spacing: .01em; font-size: .875rem; }
  @media (max-width: 640px) { .hero__go { font-size: 1rem; } }

/* /pets-assets/buyer-experience.css */
/* Buyer-facing hierarchy, shared with the live prototype through sync:pets. */
.home-nav { display: none; }
.hero-collections { margin-top: 1rem; font-size: .875rem; line-height: 1.7; text-align: center; }
.hero-collections a { color: hsl(var(--gold)); text-decoration: underline; text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; }
.btn-ghost-gold::after { display: none; }
.btn-atlas, .btn-ghost-gold { font-size: .8125rem; letter-spacing: .04em; }
.studio-tabs button, .collection-filters button { font-size: .8125rem; letter-spacing: .03em; }
.studio-favourites { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid hsl(var(--border)); }
.studio-favourites h3 { font: 400 2rem var(--font-display); }
.studio-favourites > p { max-width: 65ch; font-size: .9375rem; line-height: 1.7; color: hsl(var(--muted-foreground)); margin-top: .65rem; }
.studio-starts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.25rem; margin-top: 1.5rem; text-align: left; }
.studio-starts a { display: block; min-width: 0; }
.studio-starts img { width: 100%; aspect-ratio: 3/4; object-fit: contain; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); }
.studio-starts span { display: block; margin-top: .7rem; font: 400 1.5rem var(--font-display); color: hsl(var(--foreground)); }
.studio-starts small { display: block; margin-top: .35rem; font-size: .875rem; line-height: 1.5; color: hsl(var(--muted-foreground)); }
.studio-starts button { min-height: 44px; margin-top: .5rem; font-size: .875rem; color: hsl(var(--gold)); background: none; border: 0; text-decoration: underline; text-underline-offset: 4px; }
.studio-starts a:focus-visible, .map-artwork:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 4px; }
.studio-next { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 1.5rem; border: 1px solid hsl(var(--border)); padding: 1.25rem; margin: 1.5rem auto; max-width: 780px; background: hsl(var(--card)); }
.studio-next img { width: 100%; aspect-ratio: 3/4; object-fit: contain; }
.studio-next h3 { font: 400 2rem var(--font-display); margin: .5rem 0; }
.studio-next .btn-atlas { margin-top: 1rem; }
.studio-next p { font-size: .9375rem; line-height: 1.6; }
.studio-next[hidden], .studio-favourites[hidden] { display: none; }
#paintings-empty { max-width: 900px; margin-inline: auto; }
.map-artwork { display: block; position: relative; width: 100%; border: 0; padding: 0; background: hsl(var(--background)); color: hsl(var(--gold)); cursor: zoom-in; }
.map-artwork > span { display: block; min-height: 44px; padding: .7rem; font-size: .875rem; }
.detail .detail__scene { display: block; height: auto; aspect-ratio: auto; overflow: visible; }
.detail .detail__scene img { display: block; height: min(40svh,340px); width: 100%; object-fit: contain; object-position: center; }
.detail .detail__scene figcaption { position: static; padding: .5rem 1rem; background: none; font: 400 .875rem/1.6 var(--font-body); }
.detail .detail__tagline { position: static; display: block; max-width: none; padding: .65rem 3.5rem .65rem 1rem; background: none; border: 0; font-size: .75rem; }
.detail .detail__d { font-size: .9375rem; line-height: 1.6; }
.detail .detail__price, .atlassheet .detail__price { font-size: .8125rem; letter-spacing: 0; line-height: 1.6; }
.detail .detail__story { display: block; }
.detail .detail__cta { display: flex; flex-wrap: wrap; }
.detail .detail__cta .btn-atlas { flex-basis: 100%; }
.detail { display: flex; flex-direction: column; overflow: hidden; }
.detail, .map--compact .detail { max-height: min(calc(100% - 2rem), calc(100svh - 144px)); }
.detail__content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.detail__footer { flex: 0 0 auto; padding: .65rem 1.15rem 1rem; border-top: 1px solid hsl(var(--border)); background: hsl(var(--background)); }
.detail__footer .detail__cta { margin-top: 0; }
.detail__footer [role="status"]:empty { display: none; }
.detail #d-share { min-height: 44px; font-size: .875rem; }
.atlassheet .atlassheet__img { width: 100%; height: min(40svh,380px); max-height: none; object-fit: contain; }
.atlassheet .atlassheet__panel { max-height: 94svh; }
.atlassheet__dismiss { position: sticky; top: 0; height: 0; z-index: 3; }
.map-artwork-viewer { width: min(96vw,1100px); max-width: none; height: 94dvh; max-height: none; padding: 0; margin: auto; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground)); }
.map-artwork-viewer::backdrop { background: hsl(var(--background) / .95); }
.map-artwork-viewer__bar { display:flex; justify-content:space-between; gap:1rem; padding:.5rem; height:60px; }
.map-artwork-viewer__bar button { min-height:44px; padding: .5rem 1rem; border:1px solid hsl(var(--border)); background:hsl(var(--card)); color:hsl(var(--foreground)); font-size:.875rem; }
.map-artwork-viewer__canvas { height:calc(100% - 112px); overflow:auto; overscroll-behavior:contain; }
.map-artwork-viewer__canvas img { display:block; width:100%; height:100%; object-fit:contain; }
.map-artwork-viewer__canvas.is-zoomed img { width:200%; height:200%; max-width:none; }
.map-artwork-viewer > p { padding: .65rem 1rem; font-size:.8125rem; line-height:1.5; text-align:center; }
@media (min-width: 1024px) {
  .home-nav { display: flex; justify-content: center; gap: clamp(.65rem,1.5vw,1.5rem); margin-left: auto; }
  .home-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .8125rem; white-space: nowrap; color: hsl(var(--foreground)); }
  .home-nav a:hover { color: hsl(var(--gold)); }
  .site-header__inner .acct { margin-left: .5rem; }
  .acct__bal { display: none; }
  .hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: auto 1fr; grid-template-areas: 'copy art' 'upload art'; align-items: start; column-gap: 3rem; row-gap: 1rem; padding: 112px max(2.5rem,calc((100vw - 1200px)/2)) 2.5rem; }
  .hero__grid { grid-area: copy; padding: 0; width: 100%; }
  .hero__say { text-align: left; margin: 0; }
  .hero__say .lede { font-size: 1rem; margin-top: 1rem; }
  .hero .heading-display { font-size: clamp(2.5rem,4vw,3.5rem); }
  .hero__band { grid-area: upload; padding: 0; width: 100%; margin: 0; }
  .hero__act { margin: 0; }
  .hero__act > .hero__pick-k { display: none; }
  .hero__act .herodrop { padding-block: 1rem; }
  .hero__go { margin-top: .7rem; min-height: 48px; }
  .hero .signature-work { grid-area: art; align-self: center; display: grid; grid-template-columns: minmax(0,1fr) 104px; grid-template-rows: repeat(3,1fr); gap: 12px; padding: 0; margin: 0; width: 100%; max-width: 550px; }
  .signature-work__card:first-child { grid-row: 1 / 4; align-self: center; }
  .signature-work__card:not(:first-child) { width: 104px; }
  .signature-work__card:not(:first-child) span { font-size: .8125rem; padding: 5px 3px; }
  .signature-work__card:not(:first-child) img { height: 112px; }
  .hero-collections { margin-top: .4rem; text-align:left; }
  .hero__act .hero__price { margin-top: .35rem; font-size: .875rem; }
  .detail, .map--compact .detail { width: 390px; }
}
@media (max-width: 619px) {
  .studio-starts { grid-template-columns: repeat(2,minmax(0,1fr)); gap:1rem; }
  .studio-starts span { font-size:1.25rem; }
  .studio-starts small { font-size:.8125rem; }
  .studio-next { grid-template-columns: 80px minmax(0,1fr); padding:1rem; gap:1rem; }
  .studio-next h3 { font-size:1.5rem; }
  .studio-next .btn-atlas { width:100%; padding-inline:.65rem; }
  .map-artwork-viewer { width:100vw; height:100dvh; border:0; }
  /* The artwork and optional story scroll; choosing the setting never does. */
  .detail, .map--compact .detail {
    display: flex; flex-direction: column;
    height: min(580px, calc(100% - 5rem), calc(100svh - 144px));
    max-height: min(calc(100% - 5rem), calc(100svh - 144px));
    overflow: hidden;
  }
  .detail__content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .detail .detail__scene img { height: min(26svh, 212px); object-fit: contain; }
  .detail .detail__scene figcaption, .detail .detail__k, .detail .story-row { display: none; }
  .detail .detail__tagline { padding-block: .5rem; font-size: .6875rem; }
  .detail .detail__body { padding: .65rem 1rem .5rem; }
  .detail .detail__body .detail__d {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; font-size: .875rem; line-height: 1.5;
  }
  .detail .detail__story { margin-top: .5rem; }
  .detail__footer {
    flex: 0 0 auto; padding: .65rem 1rem .75rem;
    border-top: 1px solid hsl(var(--border)); background: hsl(var(--background));
  }
  .detail__footer .detail__price { margin-top: .4rem; font-size: .75rem; }
}

/* The offer precedes the upload; the source photograph makes likeness assessable. */
.hero__act .hero__offer { margin: 0 0 14px; }
.hero__privacy { margin-top: 12px; font-size: 13px; line-height: 1.6; color: hsl(var(--foreground)); }
.hero__privacy a { display: inline-flex; align-items: center; min-height: 44px; color: hsl(var(--gold-light)); text-decoration: underline; text-underline-offset: 3px; }
.signature-work__proof { position: relative; }
.signature-work__card img.signature-work__source { position: absolute; left: 10px; bottom: 48px; width: 84px; height: 120px; object-fit: contain; background: hsl(var(--card)); border: 2px solid hsl(var(--foreground)); }
.signature-work__card:hover { transform: none; }
html:not([data-prints="open"]) #formats .formats { grid-template-columns: minmax(0, 680px); justify-content: center; }
@media (max-width: 767px) {
  #view-landing .hero__band { margin-top: 12px; }
  #view-landing .hero__act .hero__offer .hero__price { margin-top: 0; }
  #view-landing .herodrop { padding: 10px 14px; }
  #view-landing .herodrop .herodrop__free { margin-top: 4px; }
  .hero .signature-work { margin-top: 12px; }
  .hero .signature-work__card > img:not(.signature-work__source) { height: 164px; width: 100%; object-fit: contain; }
  .hero .signature-work__proof { flex-basis: 54%; }
  .hero .signature-work__card img.signature-work__source { width: 49px; height: 70px; left: 5px; bottom: 38px; }
  .hero .signature-work__card span { font-size: 12px; }
}

/* /pets-assets/portrait-collections.css */
.portrait-collection { padding: 48px 0 24px; scroll-margin-top: 96px; }
.portrait-collection__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.portrait-collection__head .heading-section { margin-top: 8px; font-size: clamp(32px, 4vw, 48px); }
.portrait-collection__intro { max-width: 620px; margin: 14px 0 0; font-size: 15px; line-height: 1.7; color: hsl(var(--muted-foreground)); }
.portrait-collection__controls { display: flex; align-items: center; flex-shrink: 0; gap: 8px; }
.portrait-collection__controls span { font-size: 12px; margin-right: 8px; color: hsl(var(--muted-foreground)); white-space: nowrap; }
.portrait-collection__controls button { width: 44px; height: 44px; border: 1px solid hsl(var(--gold) / .5); color: hsl(var(--gold)); background: hsl(var(--card)); border-radius: var(--r); }
.portrait-collection__controls button:disabled { opacity: .35; cursor: default; }
.portrait-collection__rail { display: grid; grid-auto-flow: column; grid-auto-columns: 290px; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 3px 3px 16px; scrollbar-color: hsl(var(--gold)) hsl(var(--card)); }
.portrait-model { min-width: 0; display: flex; flex-direction: column; border: 1px solid hsl(var(--border)); border-radius: var(--r); background: hsl(var(--card)); scroll-snap-align: start; }
.portrait-model__visual { position: relative; width: 100%; padding: 0; border: 0; background: hsl(var(--background)); cursor: zoom-in; }
.portrait-model__visual img { display: block; width: 100%; height: auto; aspect-ratio: 1122 / 1402; object-fit: contain; }
.portrait-model__visual > span { display: block; padding: 8px 12px; color: hsl(var(--gold)); font-size: 12px; background: hsl(var(--background)); }
.portrait-model__body { display: flex; flex: 1; flex-direction: column; padding: 16px; }
.portrait-model__body h3 { margin: 0; font: 400 26px/1.15 var(--font-display); }
.portrait-model__body p { flex: 1; margin: 10px 0 16px; font-size: 13px; line-height: 1.65; color: hsl(var(--muted-foreground)); }
.portrait-model__body .btn-atlas { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 12px; font-size: 11px; letter-spacing: .08em; text-decoration: none; }
.portrait-collection__note { max-width: 820px; margin: 12px 0 0; font-size: 12px; line-height: 1.65; color: hsl(var(--muted-foreground)); }
.portrait-model__visual:focus-visible, .portrait-collection__controls button:focus-visible, .portrait-collection__rail:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 3px; }
.pick__img { display: block; }
.pick__img img { object-fit: contain; }
@media (max-width: 619px) {
  .portrait-collection { padding-top: 32px; }
  .portrait-collection__head { display: block; margin-bottom: 16px; }
  .portrait-collection__controls { margin-top: 16px; justify-content: flex-end; }
  .portrait-collection__controls span { margin-right: auto; }
  .portrait-collection__rail { grid-auto-columns: 76%; gap: 12px; }
  .portrait-model__body { padding: 14px; }
  .portrait-model__body h3 { font-size: 24px; }
}

/* /pets-assets/buying-tools.css */
.size-guide { padding: 1rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.size-guide svg { display:block; width:100%; max-height:280px; }
.size-guide__outer { fill:hsl(var(--muted)); stroke:hsl(var(--muted-foreground)); stroke-width:.5; }
.size-guide__opening { fill:hsl(var(--background)); stroke:hsl(var(--muted-foreground)); stroke-width:.4; }
.size-guide__selected .size-guide__outer { stroke:hsl(var(--gold)); stroke-width:1; }
.size-guide__selected .size-guide__opening { fill:hsl(var(--gold) / .2); stroke:hsl(var(--gold)); }
.size-guide__measure { stroke:hsl(var(--muted-foreground)); stroke-width:.5; }
.size-guide__metres { fill:hsl(var(--muted-foreground)); font:7px var(--font-body, sans-serif); }
.size-guide__labels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; margin-top:.8rem; }
.size-guide__labels button { min-height:44px; padding:.5rem .25rem; border:1px solid hsl(var(--border)); background:transparent; color:hsl(var(--foreground)); font:inherit; font-size:0.875rem; }
.size-guide__labels button[aria-pressed="true"] { border-color:hsl(var(--gold)); background:hsl(var(--gold) / .08); }
.size-guide__note { margin-top:.8rem; font-size:0.875rem; line-height:1.6; color:hsl(var(--muted-foreground)); }
.buying-help { display:inline-flex; align-items:center; min-height:44px; font-size:0.875rem; line-height:1.5; color:hsl(var(--gold)); text-decoration:underline; text-underline-offset:4px; }
.buying-summary { padding:.85rem 1rem; border:1px solid hsl(var(--border)); background:hsl(var(--card)); font-size:0.875rem; line-height:1.6; }
.buying-summary p + p { margin-top:.35rem; }
.buying-summary__detail { color:hsl(var(--muted-foreground)); }
.buying-summary__total { display:flex; justify-content:space-between; gap:1rem; color:hsl(var(--foreground)); }
.photo-guide { display:grid; grid-template-columns:100px minmax(0,1fr); gap:1rem; align-items:center; margin-top:1rem; }
.photo-guide img { width:100%; aspect-ratio:3/4; object-fit:contain; }
.photo-guide p { font-size:0.875rem; line-height:1.6; }
.support-attachment { display:flex; align-items:center; gap:.75rem; padding:.5rem; border:1px solid hsl(var(--border)); }
.support-attachment img { width:64px; height:64px; object-fit:contain; flex:none; }
@media (prefers-reduced-motion:reduce) { .size-guide * { transition:none; } }
.buying-explainer, .pay-selection { font-size:0.875rem; line-height:1.6; color:hsl(var(--muted-foreground)); margin-block:.75rem; }
.pet-size-help { margin-top:.5rem; }
.pet-size-help summary { cursor:pointer; }
#pane-3 .opts__row > label, #pane-3 .deliver .field > label, .fixbox__lab { font-size:0.875rem; letter-spacing:0; text-transform:none; }
#pane-3 .chips small { font-size:0.8125rem; }
.pay-selection { text-align:center; margin-top:0; }
@media (max-width:760px) {
 .payrow .trust { display:none; }
 .payrow .pay-selection { margin-bottom:.5rem; font-size:0.8125rem; line-height:1.4; }
 .payrow #pay { min-height:48px; font-size:0.875rem; letter-spacing:.02em; }
}

/* /pets-assets/photo-choice.css */
.photo-choice { margin-top:1rem; border:1px solid hsl(var(--border)); padding:1rem; background:hsl(var(--card)); border-radius:var(--r); }
.photo-choice > summary { display:list-item; min-height:44px; cursor:pointer; color:hsl(var(--gold)); font-size:0.875rem; }
.photo-choice p { font-size:0.875rem; line-height:1.65; margin-top:.75rem; color:hsl(var(--muted-foreground)); }
.photo-choice__upload { display:block; margin-top:1rem; font-size:0.875rem; }
.photo-choice__upload input { display:block; max-width:100%; margin-top:.5rem; font-size:1rem; }
.photo-choice__upload input::file-selector-button { min-height:44px; margin-right:.75rem; padding:.5rem .75rem; border:1px solid hsl(var(--border)); background:hsl(var(--background)); color:hsl(var(--gold)); }
.photo-choice__results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.photo-choice__card { display:flex; min-width:0; flex-direction:column; border:1px solid hsl(var(--border)); padding:.75rem; }
.photo-choice__card.is-suggested { border-color:hsl(var(--gold)); }
.photo-choice__card img { display:block; width:100%; height:180px; object-fit:contain; background:hsl(var(--background)); }
.photo-choice__card h4 { margin-top:.75rem; font-size:0.875rem; overflow-wrap:anywhere; }
.photo-choice__card ul { padding-left:1rem; margin-block:.75rem; font-size:0.8125rem; line-height:1.6; color:hsl(var(--muted-foreground)); }
.photo-choice__card button { min-height:48px; margin-top:auto; padding:.5rem; border:1px solid hsl(var(--gold)); background:hsl(var(--gold)); color:hsl(var(--charcoal)); font-size:0.875rem; }
.photo-choice__card button:disabled { opacity:.45; }
.photo-choice :focus-visible { outline:2px solid hsl(var(--gold)); outline-offset:3px; }
@media(max-width:479px) { .photo-choice__results { grid-template-columns:1fr; } }

/* /pets-assets/mobile-journey.css */
/* Keep a mobile decision and its visual within the same short section. */
.framer__price { margin: .5rem 0; font-size: 13px; line-height: 1.5; text-align: center; color: hsl(var(--gold)); }
.mobile-proof-preview { display: none; }
@media (max-width: 767px) {
  #view-landing .section { padding-top: 40px; padding-bottom: 40px; }
  #view-landing .section-head { margin-bottom: 24px; }
  #view-landing .section-head .rosette, #view-landing .section-head .tri-rule { display: none; }
  #view-landing .heading-section { font-size: 32px; }
  #view-landing .section-head .lede { font-size: 15px; line-height: 1.6; margin-top: 12px; }
  #view-landing .hero { min-height: 0; padding-top: 100px; padding-bottom: 28px; }
  #view-landing .hero__say .lede { font-size: 15px; line-height: 1.6; }
  #view-landing .hero__band { margin-top: 20px; }
  #view-landing .hero__act > .hero__pick-k, #view-landing .herodrop__ico { display: none; }
  #view-landing .herodrop { padding: 14px; margin-top: 0; }
  #view-landing .hero__go { min-height: 48px; margin-top: 10px; }
  #view-landing .shootrow { margin-top: 8px; }
  #view-landing .hero__act .hero__price { margin-top: 10px; }
  #view-landing .hero-collections { margin-top: 4px; }
  #view-landing .mapwrap { padding-block: 32px; }
  #map .mapwrap__head { padding-top: 0; padding-bottom: 12px; }
  #map .mapwrap__head .rosette, #map .atlas__intro { display: none; }
  #map .mapwrap__head .lede { margin: 12px auto !important; font-size: 15px; line-height: 1.5; }
  #map .atlas__grid { grid-auto-columns: min(72vw,270px); }
  #map .acard__visual > img { max-height: 280px; }
  #map .acard__why { -webkit-line-clamp: 2; font-size: 13px; }
  #map .acard__actions { padding-top: 10px; }
  #map #map-home > :not(#mapstage) { display: none; } /* Avoid repeating a second example rail under the chooser. */
  #view-landing .room { padding-block: 36px; }
  #view-landing .room__wall { grid-auto-columns: min(76vw, 280px); gap: 14px; margin-top: 16px; }
  #view-landing .room__head { gap: 16px; }
  #view-landing .room__actions { width: 100%; justify-content: space-between; gap: 8px; }
  #view-landing .room__cta { font-size: 13px; padding: 12px; }
  #view-landing .room__card img { max-height: 340px; }
  #view-landing .room__card h3 { font-size: 24px; margin-top: 10px; }
  #view-landing .room__card p { margin-top: 4px; }
  #view-landing .room__slider-count { min-width: 62px; font-size: 12px; }
  #view-landing .room__chips { flex-wrap: nowrap; overflow-x: auto; margin-top: 16px; padding-bottom: 8px; }
  #view-landing .room__chips a { flex: 0 0 auto; }
  #portrait-collections .portrait-collection { padding-top: 12px; }
  #portrait-collections .portrait-collection__head { margin-bottom: 12px; }
  #portrait-collections .portrait-collection__intro { margin-top: 8px; line-height: 1.5; }
  #portrait-collections .portrait-collection__controls { margin-top: 12px; }
  #portrait-collections .portrait-model__visual img { max-height: 340px; }
  #portrait-collections .portrait-model__body p { margin-block: 8px 12px; }
  #examples .proof-grid { grid-auto-columns: min(76vw, 270px); }
  #examples .proof-note { margin-top: 16px; line-height: 1.6; }
  #how .how { gap: 24px; }
  #how .how__media { display: none; } /* Three illustrated steps already show this same result. */
  #how .steps { margin-top: 20px; gap: 20px; }
  #how h2 { font-size: 32px; }
  #formats .formats { gap: 12px; }
  #formats .format { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; padding: 16px; }
  #formats .format__k { grid-column: 1 / -1; }
  #formats .format h3 { grid-column: 1; }
  #formats .format__price { grid-column: 2; grid-row: 2; }
  #formats .format ul, #formats .format > a { grid-column: 1 / -1; }
  #formats .format ul { gap: 0; }
  #formats .format h3 { font-size: 28px; }
  #formats .format__price { margin-block: 8px; font-size: 32px; }
  #formats .format ul { margin-block: 12px; font-size: 13px; line-height: 1.55; }
  #formats .format li { margin-block: 4px; }
  #formats .format .btn-atlas, #formats .format .btn-ghost-gold { margin-top: 12px; }
  #formats .framewrap { margin-top: 32px; padding-top: 24px; }
  #formats .framer__wall { padding: 8px; }
  #formats .fr { width: min(140px, 30svh); }
  #formats .framer__stage { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: 4px 12px; align-items: center; }
  #formats .framer__wall { grid-column: 1; grid-row: 1 / 4; }
  #formats .framer__cap, #formats .framer__price, #formats .framer__disc { margin: 0; text-align: left; font-size: 12px; line-height: 1.5; }
  #formats .framer__cap { align-self: end; }
  #formats .framer__disc { align-self: start; }
  #formats .framer__controls { margin-top: 12px; }
  #formats .framer__controls .framer__k[style] { margin-top: 12px !important; }
  #formats .framer__controls .pd-reference { display: none; } /* Available under /prints, beside full supplier specifications. */
  #formats .framer__note { font-size: 12px; }
  #formats .framer__slide { padding: 12px; }
  #formats .framer__rail { grid-auto-columns: 100%; }
  #reasons .reasons { gap: 24px; }
  #reasons .why-note { margin-block: 12px; }
  .mobile-proof-preview:not([hidden]) { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 12px; align-items: center; position: sticky; top: 132px; z-index: 15; background: hsl(var(--background)); border-bottom: 1px solid hsl(var(--border)); padding: 10px 0; }
  .mobile-proof-preview button { width: 88px; padding: 0; border: 0; background: transparent; }
  .mobile-proof-preview p, .mobile-proof-preview small { font-size: .8125rem; line-height: 1.5; }
  #mobile-proof-selection { margin-block: 6px; color: hsl(var(--gold)); }
  .mobile-proof-preview button:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 3px; }
}
@media (max-width: 359px) {
  #formats .framer__stage { grid-template-columns: 110px minmax(0,1fr); gap: 8px; }
  #formats .fr { width: 100px; }
}

/* On short screens the pinned preview and payment bar leave too little room
   for a frame chip. Keep the preview in flow so every option remains tappable. */
@media (max-width: 760px) and (max-height: 700px) {
  .mobile-proof-preview:not([hidden]) { position: static; }
}

@media (max-width: 760px) {
  #chips-frame { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #chips-frame .chip-opt { min-width: 0; white-space: normal; }
}

/* Keep the offer and upload together on a short phone without shrinking the artwork. */
@media (max-width: 767px) {
  #view-landing .hero__band { margin-top: 8px; }
  #view-landing .hero__act { margin-top: 0; }
  #view-landing .hero__act .hero__offer { margin-bottom: 8px; }
  #view-landing .herodrop { padding: 10px 14px; min-height: 82px; }
  #view-landing .herodrop > span { display: none; }
  #view-landing .herodrop strong { font-size: 20px; line-height: 1.25; }
  #view-landing .herodrop .herodrop__free { margin-top: 4px; font-size: 13px; line-height: 1.5; }
}

/* /pets-assets/landing-structure.css */
/* The acquisition page moves from evidence to choice, with optional depth. */
#view-landing .section { padding-block:48px; }
#view-landing .section-head { margin-bottom:24px; }
#examples .section-head { max-width:760px; }
#examples .heading-section { font-size:clamp(30px,3.4vw,44px); }
#examples .lede { font-size:1rem; line-height:1.6; margin-top:12px; }
.first-proof-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.first-proof h3 { font:400 1.5rem/1.2 var(--font-display); margin-bottom:12px; }
.first-proof__pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.first-proof__pair a { display:block; background:hsl(var(--card)); border:1px solid hsl(var(--border)); }
.first-proof__pair img { display:block; width:100%; height:220px; object-fit:contain; }
.first-proof figcaption { font-size:.8125rem; margin-top:6px; }
.first-proof p { font-size:.875rem; line-height:1.6; margin-top:12px; }
.first-proof__limit { color:hsl(var(--muted-foreground)); }
.first-proof__credit { margin-top:10px; font-size:.8125rem; }
.first-proof__credit summary { min-height:44px; display:flex; align-items:center; cursor:pointer; text-decoration:underline; }
.first-proof__credit a, .proof-note + a { text-decoration:underline; }
#examples .proof-note { margin-top:20px; max-width:78ch; font-size:.875rem; line-height:1.6; }
#map { padding-block:40px; }
#map .mapwrap__head { text-align:left; padding-bottom:20px; }
#map .mapwrap__head .heading-section { margin-top:8px; font-size:clamp(32px,4vw,48px); }
#map .mapwrap__head .lede { margin-top:12px; max-width:65ch; font-size:1rem; line-height:1.6; }
#map .atlas { display:block; }
#map .atlas__intro { display:none; }
#map .atlas__index { margin-top:12px; }
#map .atlas__index summary { cursor:pointer; min-height:44px; font-size:.875rem; display:flex; align-items:center; text-decoration:underline; }
#map .atlas__grid { grid-auto-columns: minmax(220px,260px); }
#map .acard__visual img { max-height:285px; object-fit:contain; }
#map .acard__actions button { font-size:.875rem; text-transform:none; letter-spacing:normal; }
#imagined-slot #portrait-collections { padding:0; max-width:1248px; }
#imagined-slot { max-width:1248px; margin-inline:auto; padding-inline:24px; }
#imagined-slot .portrait-collection { padding-top:28px; padding-bottom:12px; }
#imagined-slot .portrait-collection__head .heading-section { font-size:1.75rem; margin-top:6px; }
#imagined-slot .portrait-collection__intro { margin-top:8px; max-width:65ch; }
#imagined-slot .portrait-collection__rail { grid-auto-columns:230px; }
#imagined-slot .portrait-model__visual img { max-height:260px; object-fit:contain; }
#imagined-slot .portrait-model__body { padding:12px; }
#imagined-slot .portrait-model__body p:not(.setting-kind) { display:none; }
#imagined-slot .portrait-model__body h3 { font-size:1.5rem; margin-bottom:12px; }
#imagined-slot .portrait-model__body .btn-atlas { font-size:.875rem; text-transform:none; letter-spacing:normal; }
#imagined-slot .setting-kind { margin:0 0 8px; font-size:.8125rem; color:hsl(var(--muted-foreground)); }
.curator-choice { max-width:1200px; margin:20px auto; padding-inline:24px; border-top:1px solid hsl(var(--border)); }
.curator-choice > summary { min-height:56px; display:flex; align-items:center; font-size:1rem; cursor:pointer; text-decoration:underline; }
.curator-choice .page-shell { padding:0; }
.curator-choice .section-head { margin-top:12px; }
.curator-choice .cur__room { padding-bottom:24px; }
.city-invitation { display:grid; grid-template-columns:240px 1fr; align-items:center; gap:28px; margin-top:24px; }
.city-invitation__image img { display:block; width:100%; aspect-ratio:900/645; object-fit:cover; border:1px solid hsl(var(--border)); }
.city-invitation h3 { font:400 2rem/1.2 var(--font-display); }
.city-invitation p { margin-top:10px; font-size:.9375rem; line-height:1.6; max-width:50ch; color:hsl(var(--muted-foreground)); }
.city-invitation .map-views { justify-content:flex-start; margin-block:12px; }
.city-invitation small { display:block; font-size:.75rem; line-height:1.5; color:hsl(var(--muted-foreground)); }
#map-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#how .how { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:36px; align-items:start; }
#how .how > .reveal-up { opacity:1; transform:none; }
#how h2 { font-size:clamp(32px,4vw,46px); line-height:1.1; }
#how .steps { display:grid; gap:22px; margin-top:24px; }
#how .step { display:grid; grid-template-columns:32px 1fr; gap:16px; }
#how .step__shot { width:32px; height:32px; padding:0; background:none; border:0; }
#how .step__n { position:static; font-size:.875rem; color:hsl(var(--charcoal)); background:hsl(var(--gold)); width:28px; height:28px; display:grid; place-items:center; }
#how .step h3 { font-size:1.5rem; font-weight:400; }
#how .step p { font-size:1rem; line-height:1.65; margin-top:6px; max-width:65ch; }
/* This nested offer owns its light surface; discovery's dark card token must
   not sit beneath the surrounding plaster section's dark text. */
#how #formats { --background:var(--cream); --card:var(--cream); --foreground:var(--charcoal); --muted-foreground:var(--charcoal); --border:var(--sand);
  padding:24px; border:1px solid hsl(var(--border) / .5); border-radius:var(--r); background:hsl(var(--card)); color:hsl(var(--foreground)); }
#how #formats .page-shell { padding:0; }
#how #formats .section-head h3 { font-size:2rem; font-weight:400; line-height:1.15; margin-top:8px; color:hsl(var(--foreground)); }
#how #formats .section-head p { margin-top:10px; font-size:1rem; line-height:1.65; color:hsl(var(--foreground)); max-width:65ch; }
#how #formats .section-head .eyebrow { font-size:.8125rem; font-weight:500; letter-spacing:.02em; text-transform:none; }
#how #formats .formats { display:block; }
#how #formats .format { border:0; padding:0; background:none; box-shadow:none; }
#how #formats .format h3 { font-size:1.5rem; font-weight:400; color:hsl(var(--foreground)); }
#how #formats .format__k { font-size:.8125rem; font-weight:500; letter-spacing:.02em; text-transform:none; color:hsl(var(--foreground)); }
#how #formats .format__price { font:600 2.25rem/1.15 var(--font-body); letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-block:12px; color:hsl(var(--foreground)); }
#how #formats .format ul { margin-bottom:16px; }
#how #formats .format li { font-size:1rem; line-height:1.65; color:hsl(var(--foreground)); }
#how #formats a:not(.btn-atlas) { color:hsl(var(--foreground)); text-decoration:underline; text-underline-offset:4px; }
#how #formats .btn-atlas { font-size:1rem; letter-spacing:0; text-transform:none; line-height:1.4; }
#how #trust { grid-column:1/-1; border-top:1px solid hsl(var(--border)); padding-top:10px; }
#how #trust summary { min-height:44px; cursor:pointer; text-decoration:underline; }
#how #trust .page-shell { padding:0; }
#how #trust .ns { color:hsl(var(--cream)); --muted-foreground:var(--sand); }
#how #trust .ns b, #how #trust .ns p { color:hsl(var(--cream)); }
.occasion-doors { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:16px; }
.occasion-doors h2 { font:400 1.75rem/1.2 var(--font-display); }
.occasion-doors p { font-size:.9375rem; line-height:1.6; color:hsl(var(--muted-foreground)); margin-block:12px; }
.occasion-doors a { min-height:44px; display:inline-flex; align-items:center; font-size:.875rem; text-decoration:underline; }
#final-cta .final { padding-block:28px; }
#final-cta .heading-section { font-size:clamp(32px,4vw,48px); }
.studio-doors { padding-block:32px; display:grid; grid-template-columns:1fr 1fr; gap:20px; border-top:1px solid hsl(var(--border)); }
.studio-doors > h2 { grid-column:1/-1; font:400 1.5rem/1.2 var(--font-display); }
.studio-door > a { display:flex; gap:20px; align-items:center; padding:16px; border:1px solid hsl(var(--border)); text-decoration:none; }
.studio-door img { width:76px; height:104px; object-fit:contain; }
.studio-door h3 { font:400 1.75rem/1.2 var(--font-display); }
.studio-door p { margin-block:8px; font-size:.875rem; color:hsl(var(--muted-foreground)); }
.studio-door span > span { font-size:.875rem; text-decoration:underline; }
.city-explorer { position:fixed; inset:0; width:100%; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:hsl(var(--background)); color:hsl(var(--foreground)); overflow:hidden; }
.city-explorer:not([open]) { display:none; }
.city-explorer[open] { display:flex; flex-direction:column; }
.city-explorer .city-explorer__head { flex:none; flex-wrap:wrap; }
.city-explorer #map-home { flex:1; min-height:0; height:auto; }
/* One exit in the dialog header; it never covers the search's editable area. */
.city-explorer #mapexit { display:none; }
.city-explorer .maphud .search { left:16px; right:16px; width:auto; max-width:none; }
.city-explorer #q { flex:1; min-width:0; }
.city-explorer__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; min-height:68px; border-bottom:1px solid hsl(var(--border)); }
.city-explorer__head h2 { font:400 1.5rem/1.2 var(--font-display); }
.city-explorer__head button { min-height:44px; font-size:.875rem; text-transform:none; letter-spacing:normal; }
.city-explorer #map-home { height:calc(100dvh - 68px); }
.city-explorer .map { height:100%; min-height:0; }
.city-explorer__failure { position:absolute; top:80px; left:20px; right:20px; padding:20px; z-index:60; background:hsl(var(--card)); border:1px solid hsl(var(--border)); font-size:1rem; line-height:1.6; }
.city-explorer__failure button { text-decoration:underline; min-height:44px; padding:8px; }
.city-explorer .pin:not(.is-selected):not(:focus-visible) .pin__reveal { opacity:0!important; }
.city-explorer .pin__reveal-kind { display:none; }
.city-explorer .pin.is-label-muted:not(:focus-visible) .pin__name { visibility:hidden; }
.city-explorer .pin:not(.is-selected) .pin__name { background:hsl(var(--background) / .9); color:hsl(var(--cream)); opacity:1; }
.city-explorer .detail__k, .city-explorer .detail__price, .city-explorer .mapexit { font-size:.8125rem; text-transform:none; letter-spacing:normal; }
.detail__map-toggle { display:none; }
.detail__compact { display:none; gap:12px; align-items:center; padding:10px 14px; }
.detail__compact img { object-fit:contain; width:54px; height:72px; }
.detail__compact p { font-size:.875rem; line-height:1.5; }
#creator-settings-return { white-space:normal; font-size:.8125rem; text-transform:none; letter-spacing:normal; }
@media(max-width:767px) {
  .detail__compact:not([hidden]) { display:flex; }
  #view-landing .section { padding-block:32px; }
  .first-proof-grid { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(86vw,340px); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; }
  .first-proof { scroll-snap-align:start; }
  .first-proof__pair img { height:190px; }
  .first-proof p { font-size:.8125rem; }
  #map .mapwrap__head .lede { margin:10px 0!important; }
  #map .atlas__grid { grid-auto-columns:min(74vw,260px); }
  #imagined-slot { padding-inline:20px; }
  #imagined-slot .portrait-collection__rail { grid-auto-columns:70%; }
  #imagined-slot .portrait-model__visual img { max-height:220px; }
  .city-invitation { grid-template-columns:112px minmax(0,1fr); gap:16px; }
  .city-invitation h3 { font-size:1.5rem; }
  .city-invitation .map-views { display:block; }
  .city-invitation #atlas-back2d { display:none; }
  .city-invitation small { grid-column:1/-1; }
  #how .how { grid-template-columns:1fr; gap:24px; }
  #how #formats .format { display:block; }
  .occasion-doors { grid-template-columns:1fr; gap:20px; }
  .occasion-doors article { padding-bottom:16px; border-bottom:1px solid hsl(var(--border)); }
  .studio-doors { grid-template-columns:1fr; }
  .city-explorer__head { padding:10px 12px; }
  .city-explorer__head h2 { font-size:1.25rem; }
  .city-explorer .detail { inset:auto 8px 8px; max-height:calc(100% - 88px); width:auto; }
  .city-explorer .detail__map-toggle { display:block; min-height:44px; padding:10px 14px; width:calc(100% - 54px); text-align:left; font-size:.875rem; text-decoration:underline; }
  .city-explorer .detail.is-map-context .detail__content, .city-explorer .detail.is-map-context .detail__price, .city-explorer .detail.is-map-context #d-share { display:none; }
  .city-explorer .detail.is-map-context .detail__footer { padding-top:0; }
  .city-explorer .detail.is-map-context .detail__cta { margin-top:0; }
  .city-explorer .detail .detail__scene img { object-fit:contain; }
  .city-explorer .detail .detail__scene { height:auto; }
  .city-explorer .detail .map-artwork img { max-height:38dvh; }
  .city-explorer .narrative { width:calc(100% - 96px); }
}
@media(prefers-reduced-motion:reduce) { .city-explorer *, .first-proof-grid { scroll-behavior:auto!important; } }
.city-explorer[open] { display:flex; flex-direction:column; }
.city-explorer__head { flex-shrink:0; padding-top:max(10px,env(safe-area-inset-top)); }
.city-explorer #map-home { height:auto; flex:1; min-height:0; }
.city-explorer .map { padding-bottom:env(safe-area-inset-bottom); }
@media(max-width:767px) {
  .city-explorer .detail.is-map-context { height:auto; max-height:none; }
  .city-explorer .detail.is-map-context .detail__footer { flex:none; }
}
.city-explorer .detail__map-toggle { color:hsl(var(--cream)); background:hsl(var(--card)); border:0; border-bottom:1px solid hsl(var(--border)); }
.city-explorer .detail__map-toggle:focus-visible { outline:2px solid hsl(var(--gold)); outline-offset:-3px; }
.city-explorer .detail__compact { color:hsl(var(--cream)); }
.city-explorer .pin__name { font-size:.8125rem; line-height:1.3; letter-spacing:normal; }
.city-explorer .pin.is-dim:not(:focus-visible) .pin__name { visibility:hidden; }
#view-studio .studio-tabs button, #view-studio .collection-filters button { font-size:.875rem; letter-spacing:normal; text-transform:none; }
#view-studio .studio-empty-action { margin-top:16px; }
#view-studio .studio-entry { margin-top:12px; gap:16px; }
#view-studio .studio-entry button { width:auto; min-height:44px; padding:8px; font-size:.875rem; letter-spacing:normal; text-transform:none; color:hsl(var(--cream)); }
.city-explorer .pin:focus-visible { opacity:1!important; }
.city-explorer .pin:not(.is-selected) .pin__reveal { display:none; }
.city-explorer .detail__cta .btn-atlas { font-size:.875rem; text-transform:none; letter-spacing:.01em; }
.city-explorer__announce { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.city-explorer > .attrib { position:static; flex-shrink:0; margin:0; padding:6px 12px max(6px,env(safe-area-inset-bottom)); font-size:.75rem; line-height:1.5; color:hsl(var(--muted-foreground)); background:hsl(var(--background)); border-top:1px solid hsl(var(--border)); }
/* Enlarged text can make the footer taller than the image area: scroll the full panel. */
.city-explorer.is-large-type .detail:not(.is-map-context) { display:block; height:auto; max-height:calc(100% - 16px); overflow-y:auto; }
.city-explorer.is-large-type .detail:not(.is-map-context) .detail__content { overflow:visible; flex:none; }

/* A single first action; the file/drop route stays identical to the creator's. */
#view-landing .hero__act .herodrop { margin:0; padding:0; min-height:0; border:0; border-radius:var(--r); background:none; box-shadow:none; transform:none; cursor:default; }
#view-landing .hero__act .herodrop.is-over { outline:2px dashed hsl(var(--gold)); outline-offset:6px; }
#view-landing .hero__act .hero__go { margin:0; min-height:52px; }
#view-landing .hero__act .herodrop__free { margin:8px 0 0; font:400 .875rem/1.5 var(--font-body); color:hsl(var(--foreground)); text-align:left; }
#view-landing .hero__price, #view-landing .hero__avail { text-align:left; }
#view-landing .hero__price { line-height:1.6; }
#view-landing .shootrow { margin-top:4px; justify-content:flex-start; }
#view-landing .hero__evidence { display:inline-flex; align-items:center; min-height:44px; font-size:.875rem; text-decoration:underline; text-underline-offset:4px; color:hsl(var(--gold-light)); }
#view-landing .hero__privacy { margin-top:0; max-width:62ch; }
#view-landing .hero__privacy a { min-height:32px; }
#view-landing .signature-work__card img.signature-work__source { width:110px; height:154px; }
#view-landing .reveal-up { opacity:1; transform:none; transition:none; }
.acct__signin.is-preview-start { text-transform:none; letter-spacing:normal; }
.standing__btn span { font-size:1rem; text-transform:none; letter-spacing:normal; }
.standing__btn em { font-size:.8125rem; text-transform:none; letter-spacing:normal; }

/* One large, inspectable first outcome. More evidence stays one disclosure away. */
.first-proof-grid { display:block; overflow:visible; }
.first-proof--featured { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); column-gap:32px; align-content:start; }
.first-proof--featured .first-proof__pair { grid-column:1; grid-row:1/5; }
.first-proof--featured > h3, .first-proof--featured > p, .first-proof--featured > details { grid-column:2; }
.first-proof--featured .first-proof__pair img { height:330px; }
.first-proof p { font-size:1rem; }
.first-proof figcaption, .first-proof__credit { font-size:.875rem; line-height:1.6; }
.proof-more { margin-top:20px; border-top:1px solid hsl(var(--border)); }
.proof-more > summary, .proof-correction > summary { display:flex; align-items:center; min-height:48px; cursor:pointer; text-decoration:underline; text-underline-offset:4px; font-size:.9375rem; }
.proof-more > summary::after, .proof-correction > summary::after { content:'+'; margin-left:auto; padding-left:16px; }
.proof-more[open] > summary::after, .proof-correction[open] > summary::after { content:'−'; }
.proof-more__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; padding-top:16px; }
.proof-more .first-proof__pair img { height:280px; }
.proof-correction { margin-top:12px; }
.proof-correction p { color:hsl(var(--foreground)); }
.proof-correction .first-proof__pair { grid-template-columns:repeat(auto-fit,minmax(min(100%,6rem),1fr)); }
.proof-correction .first-proof__pair figure { min-width:0; }

/* A small edit first. Full search, real/imagined collections and city remain optional. */
#map .mapwrap__head .atlas-link { display:inline-flex; align-items:center; min-height:44px; font-size:1rem; margin-top:8px; }
.setting-edit { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.setting-edit article { min-width:0; }
.setting-edit button { width:100%; text-align:left; background:none; border:0; padding:0; color:hsl(var(--foreground)); }
.setting-edit img { display:block; width:100%; height:280px; object-fit:contain; background:hsl(var(--card)); }
.setting-edit button > span:first-of-type { display:block; font-size:.8125rem; line-height:1.5; color:hsl(var(--muted-foreground)); margin-top:12px; }
.setting-edit h3 { font:400 1.75rem/1.2 var(--font-display); margin-top:6px; }
.setting-edit__action { display:flex; align-items:center; min-height:44px; font-size:.9375rem; color:hsl(var(--gold-light)); text-decoration:underline; text-underline-offset:4px; }
.settings-catalogue { margin-top:16px; }
.settings-catalogue > summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; max-width:1200px; margin:auto; padding:12px 24px; border-block:1px solid hsl(var(--border)); cursor:pointer; font-size:1rem; line-height:1.6; }
.settings-catalogue > summary::after { content:'+'; font-size:1.5rem; }
.settings-catalogue[open] > summary::after { content:'−'; }
.settings-catalogue__content { padding-top:24px; }
#map .acard__actions .acard__pick { background:none; color:hsl(var(--gold-light)); border:1px solid hsl(var(--gold) / .5); box-shadow:none; }
#imagined-slot .portrait-model__body .btn-ghost-gold { font-size:.875rem; text-transform:none; letter-spacing:normal; padding:12px; min-height:44px; box-shadow:none; }

/* Show the file in a familiar use scene without implying a shipped phone app. */
#how .how { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:40px; }
#how .steps { gap:18px; }
#how #formats .section-head { text-align:left; margin-bottom:20px; }
#how #formats .section-head h3 { margin-top:0; }
#how #formats .section-head p { font-size:.9375rem; line-height:1.6; }
.digital-delivery { display:grid; grid-template-columns:minmax(100px,.65fr) minmax(0,1fr); gap:24px; align-items:start; }
.digital-example { min-width:0; }
.digital-example__phone { padding:18px 6px; border:3px solid hsl(var(--charcoal)); border-radius:var(--r); background:hsl(var(--charcoal)); }
.digital-example__phone img { width:100%; display:block; object-fit:contain; }
.digital-example figcaption { margin-top:10px; font-size:.75rem; line-height:1.6; color:hsl(var(--charcoal)); }
#how #formats .format__k { display:none; }
#how #formats .format h3 { font-size:1.5rem; }
#how #formats .format__price { margin-block:12px 4px; }
#how #formats .format__once { font-size:.875rem; line-height:1.5; margin-bottom:16px; }
#how #formats .format ul { margin-block:0 12px; padding:0; }
#how #formats .format li { margin-top:8px; font-size:.9375rem; line-height:1.6; }
#how #formats .digital-specs { margin-bottom:16px; font-size:.875rem; line-height:1.6; }
#how #formats .digital-specs summary { display:flex; align-items:center; min-height:44px; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
#how #formats .digital-specs p { margin-top:8px; }
#how #formats .btn-atlas { width:100%; padding:14px 12px; }
@media(max-width:1023px) and (min-width:768px) {
  #how .how { grid-template-columns:1fr; }
  .digital-delivery { grid-template-columns:180px minmax(0,1fr); }
}
@media(max-width:767px) {
  #view-landing .hero { padding-top:88px; }
  #view-landing .hero .signature-work__card > img:not(.signature-work__source) { height:148px; }
  #view-landing .signature-work__card img.signature-work__source { width:64px; height:90px; bottom:34px; }
  #view-landing .hero__act .hero__offer { margin-bottom:12px; }
  #view-landing .hero__evidence { font-size:.8125rem; }
  .first-proof--featured { display:block; }
  .first-proof--featured .first-proof__pair img { height:240px; }
  .proof-more__grid { grid-template-columns:1fr; gap:28px; }
  .proof-more .first-proof__pair img { height:240px; }
  .first-proof p { font-size:.9375rem; }
  #how .how { grid-template-columns:1fr; gap:28px; }
  #how #formats { padding:20px; }
  .digital-delivery { grid-template-columns:100px minmax(0,1fr); gap:16px; }
  #how #formats .format h3 { font-size:1.25rem; }
  #how #formats .format li { font-size:.875rem; }
  .setting-edit { gap:16px; overflow-x:auto; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(64vw,240px); scroll-snap-type:x mandatory; }
  .setting-edit article { scroll-snap-align:start; }
  .setting-edit img { height:220px; }
  .setting-edit h3 { font-size:1.5rem; }
}
@media(max-width:619px) { .acct__signin.is-preview-start { display:none; } }
@media(max-width:359px) { .digital-delivery { grid-template-columns:1fr; } .digital-example { max-width:150px; } }
#view-landing #how::after { content:none; }
html:not([data-prints="open"]) #formats .framewrap { display:none; }
#view-landing .hero__act .herodrop__free .hero-drop-note { display:inline; font:inherit; color:inherit; }
@media(max-width:767px) {
  #view-landing .hero__act .herodrop__free .hero-drop-note { display:none; }
}
@media(max-width:767px) and (max-height:740px) {
  #view-landing .hero { padding-top:80px; }
  #view-landing .hero .heading-display { font-size:2.5rem; line-height:1.05; }
  #view-landing .hero__say .lede { font-size:.875rem; line-height:1.5; margin-top:12px; }
  #view-landing .hero .signature-work__card > img:not(.signature-work__source) { height:104px; }
  #view-landing .signature-work__card img.signature-work__source { width:44px; height:62px; }
}

/* Finish the current buying path using the same surface and typography roles. */
#view-landing .hero__privacy { line-height:1.6; }
#view-landing .hero__privacy a { display:inline; min-height:0; padding:0; line-height:inherit; }
#how .step h3 { font:600 1.125rem/1.4 var(--font-body); font-style:normal; letter-spacing:0; }
#atlas-clear { appearance:none; border:0; background:none; padding:0 4px; color:hsl(var(--gold-light)); font:inherit; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
#map .acard__why { display:block; overflow:visible; -webkit-line-clamp:unset; }
.setting-edit[hidden] { display:none; }
.settings-help { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:12px; }
.settings-help a, .proof-correction-link { display:inline-flex; align-items:center; min-height:44px; font-size:.875rem; line-height:1.6; color:hsl(var(--gold-light)); text-decoration:underline; text-underline-offset:4px; }
.proof-correction-link { margin-top:12px; }
#correction-example, #curator, #royal-portraits, #settings-catalogue { scroll-margin-top:88px; }
.cur__image-status { font-size:.875rem; line-height:1.6; color:hsl(var(--foreground)); margin-top:8px; }
#how #formats .digital-file-line, #how #formats .digital-reassurance { font-size:.875rem; line-height:1.6; color:hsl(var(--charcoal)); margin-block:12px; }
.digital-example__phone { position:relative; padding:24px 6px 22px; border:2px solid hsl(var(--sand)); box-shadow:var(--shadow-soft); }
.digital-example__phone::before, .digital-example__phone::after { content:''; position:absolute; left:36%; right:36%; height:3px; border-radius:var(--r); background:hsl(var(--sand)); }
.digital-example__phone::before { top:9px; }
.digital-example__phone::after { bottom:8px; }
.digital-example figcaption { font-size:.8125rem; }
#view-landing .proof-note, #imagined-slot .portrait-collection__note, #view-landing .setting-kind, #view-landing .acard__h { color:hsl(var(--sand)); font-size:.875rem; line-height:1.6; }
.faq-print-support__answers { border-left:1px solid hsl(var(--border)); padding-left:16px; margin-top:12px; }
#faq .faq-print-support__answers > details { display:block; }
#faq .faq-print-support__answers summary { font-size:1rem; }
.image-load-status { display:block; padding:12px; color:hsl(var(--foreground)); font:400 .875rem/1.6 var(--font-body); }
.standing__short { display:none; }
@media(max-width:899px) {
  /* The one continuation action occupies header layout, never the artwork. */
  .site-header .standing { position:static; inset:auto; padding:0; margin-left:auto; background:none; transform:none; transition:none; flex:0 1 auto; min-width:0; }
  .site-header .standing[hidden] { display:none; }
  .site-header .standing__btn { min-height:44px; padding:8px 12px; background:hsl(var(--gold)); color:hsl(var(--charcoal)); box-shadow:none; border:1px solid hsl(var(--gold)); }
  .site-header .standing__full, .site-header .standing__btn em { display:none; }
  .site-header .standing__short { display:block; font:500 .875rem/1.4 var(--font-body); white-space:nowrap; }
  .site-header .standing__btn:focus-within { outline:2px solid hsl(var(--cream)); outline-offset:3px; }
  .has-landing-continuation .site-header .acct { display:none; }
  .has-landing-continuation .site-header .wordmark { font-size:.875rem; }
  .has-landing-continuation .site-header .wordmark small { display:none; }
}
@media(max-width:767px) {
  #view-landing .shootrow { justify-content:center; }
  #view-landing .hero__act .herodrop__free { text-align:center; }
  .setting-edit { scroll-padding-inline:1.25rem; }
  .proof-correction .first-proof__pair { gap:8px; }
  .proof-more .proof-correction .first-proof__pair img { height:160px; }
  .proof-correction figcaption { font-size:.8125rem; line-height:1.5; overflow-wrap:anywhere; }
}

/* /pets-assets/portrait-workspace.css */
/* One portrait journey: landing, creator and saved Studio share these tokens.
   Gallery and city exhibition surfaces keep their own local palettes. */
body:has(:is(#view-landing,#view-create,#view-studio,#view-order).is-on),
#view-landing, #view-create, #view-create.is-step3, #view-studio, #view-order,
body:has(:is(#view-landing,#view-create,#view-studio,#view-order).is-on) > .site-header,
body:not(.in-app) > .site-footer {
  --background:38 44% 96%; --foreground:45 8% 10%; --card:0 0% 100%;
  --secondary:36 37% 92%; --muted:36 25% 90%; --muted-foreground:32 8% 34%;
  --border:36 27% 85%; --gold:12 61% 44%; --gold-light:12 61% 38%; --gold-dark:12 61% 34%;
  --ink:45 8% 10%; --ink-soft:32 8% 34%; --ink-faint:32 8% 34%; --gold-lit:12 61% 38%;
  --pw-blue:228 59% 41%; --pw-panel-radius:14px; --pw-control-radius:8px;
  color:hsl(var(--foreground)); background:hsl(var(--background));
}
body:not(.in-app) { background:hsl(38 44% 96%); }
body:not(.in-app) > .site-header { background:hsl(var(--card)); backdrop-filter:none; }
body:not(.in-app) .site-header__inner { height:56px; }
body:not(.in-app) .site-header .wordmark, body:not(.in-app) .site-footer .wordmark { color:hsl(var(--foreground)); }
body:not(.in-app) .site-header .wordmark small { display:none; }
body:not(.in-app) .site-header .acct, body:not(.in-app) .site-header .menubtn { background:hsl(var(--card)); color:hsl(var(--foreground)); border-color:hsl(var(--border)); }
body:not(.in-app) .site-header .acct__signin, body:not(.in-app) .site-header .home-nav a { color:hsl(var(--foreground)); }
body:not(.in-app) .site-header .acct__menu { --background:30 18% 5%; --card:30 14% 8%; --foreground:36 38% 92%; --gold:42 52% 54%; color:hsl(var(--foreground)); }
#view-landing a:focus-visible, #view-landing button:focus-visible, #view-landing summary:focus-visible { outline:3px solid hsl(var(--pw-blue)); outline-offset:3px; }
#view-landing .portrait-workspace { padding:80px 0 48px; background:hsl(var(--background)); }
.portrait-workspace .page-shell { max-width:1200px; }
.pw-heading { text-align:center; margin-bottom:20px; }
.pw-heading h1 { font:600 clamp(1.625rem,3.2vw,2.75rem)/1.12 var(--font-body); letter-spacing:-.025em; color:hsl(var(--foreground)); }
.pw-heading h1 em { font:400 italic 1.14em/1 var(--font-display); color:hsl(var(--gold)); letter-spacing:normal; }
.pw-heading > p { font-size:1rem; line-height:1.5; color:hsl(var(--muted-foreground)); max-width:80ch; margin:12px auto 0; }
.pw-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:hsl(var(--border)); border:1px solid hsl(var(--border)); gap:1px; border-radius:10px; overflow:hidden; margin-bottom:20px; }
.pw-facts p { padding:12px 16px; font-size:.875rem; line-height:1.5; background:hsl(var(--card)); color:hsl(var(--muted-foreground)); }
.pw-facts b { display:block; font-weight:600; color:hsl(var(--foreground)); }
.pw-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:start; }
.pw-example { margin:0; border:1px solid hsl(var(--border)); border-radius:var(--pw-panel-radius); padding:16px; background:hsl(var(--card)); position:sticky; top:76px; min-width:0; }
.pw-mount { display:flex; justify-content:center; align-items:center; background:hsl(var(--secondary)); border-radius:var(--pw-control-radius); padding:16px; }
.pw-mount img { display:block; width:auto; height:auto; max-height:460px; max-width:100%; object-fit:contain; }
.pw-example figcaption { padding:14px 4px 2px; }
.pw-flag { display:inline-block; background:hsl(var(--foreground)); color:hsl(var(--card)); padding:5px 9px; border-radius:4px; font-size:.875rem; font-weight:600; line-height:1.3; }
.pw-example h2 { font:400 1.875rem/1.1 var(--font-display); margin-top:10px; }
.pw-example figcaption p { font:.875rem/1.5 var(--font-body); color:hsl(var(--muted-foreground)); margin-top:4px; }
.pw-config { border:1px solid hsl(var(--border)); border-radius:var(--pw-panel-radius); padding:20px; background:hsl(var(--card)); min-width:0; }
.pw-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:18px; }
.pw-steps button { min-height:44px; border:1px solid hsl(var(--border)); background:hsl(var(--background)); border-radius:var(--pw-control-radius); font:.875rem/1.4 var(--font-body); text-align:left; padding:6px 10px; color:hsl(var(--foreground)); }
.pw-steps button[aria-current] { border-color:hsl(var(--pw-blue)); box-shadow:inset 0 0 0 1px hsl(var(--pw-blue)); }
.pw-steps button span { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:hsl(var(--foreground)); color:hsl(var(--card)); font-size:.75rem; margin-right:6px; }
.pw-panel { padding:4px 0 14px; border-bottom:1px solid hsl(var(--border)); margin-bottom:14px; }
.pw-panel[hidden] { display:none!important; }
.pw-panel h3 { font:600 1rem/1.5 var(--font-body); margin-bottom:10px; }
.pw-panel h3 span { font-weight:400; color:hsl(var(--muted-foreground)); }
.pw-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.pw-options button { min-height:44px; border:1px solid hsl(var(--border)); border-radius:var(--pw-control-radius); background:hsl(var(--card)); color:hsl(var(--foreground)); font:.875rem/1.4 var(--font-body); padding:8px; text-align:center; }
.pw-options button[aria-pressed=true] { border-color:hsl(var(--pw-blue)); box-shadow:inset 0 0 0 2px hsl(var(--pw-blue)); }
.pw-options button:hover { background:hsl(var(--secondary)); }
.pw-options--styles { grid-template-columns:1fr 1fr; }
.pw-note { font-size:.875rem; line-height:1.5; color:hsl(var(--muted-foreground)); margin-top:10px; }
.pw-more { margin-top:4px; font-size:.875rem; }
.pw-more summary { cursor:pointer; display:flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:4px; }
.pw-more nav { display:flex; flex-wrap:wrap; gap:0 16px; padding-bottom:8px; }
.pw-more a { display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; }
#view-landing .pw-entry .pw-go, #view-landing .btn-atlas { background:hsl(var(--gold)); color:hsl(var(--card)); border-color:hsl(var(--gold)); font-family:var(--font-body); text-transform:none; letter-spacing:normal; }
#view-landing .pw-entry .pw-go { display:flex; width:100%; min-height:54px; justify-content:center; align-items:center; border:0; border-radius:10px; padding:12px; font-size:1rem; line-height:1.4; font-weight:600; }
#view-landing .pw-entry .pw-go:hover, #view-landing .btn-atlas:hover { background:hsl(var(--gold-dark)); }
#view-landing .pw-entry .herodrop__free { text-align:center; font-size:.875rem; line-height:1.5; }
#view-landing .pw-entry .shootrow { margin:4px 0 0; justify-content:center; }
#view-landing .pw-entry .btn-shoot { min-height:44px; padding:0 6px; color:hsl(var(--foreground)); font:.875rem/1.4 var(--font-body); text-decoration:underline; text-transform:none; letter-spacing:normal; }
.pw-summary { margin-top:16px; padding:16px; border-radius:10px; background:hsl(var(--secondary)); font-size:.875rem; line-height:1.5; }
.pw-summary h3 { font:600 .9375rem/1.5 var(--font-body); margin-bottom:8px; }
.pw-summary dl { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:6px 14px; margin:0; }
.pw-summary dt { color:hsl(var(--muted-foreground)); }
.pw-summary dd { margin:0; }
.pw-summary b { font-weight:600; font-variant-numeric:tabular-nums; }
.pw-summary > p { margin-top:12px; color:hsl(var(--muted-foreground)); }
#view-landing .hero__privacy { font-size:.8125rem; line-height:1.6; color:hsl(var(--muted-foreground)); }
#view-landing .hero__evidence { color:hsl(var(--gold-light)); }
.pw-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
/* The entire lower page remains part of the journey, with its original routes,
   evidence and disclosures. Keep darker preview/inspection surfaces local. */
#view-landing > .section, #view-landing > .mapwrap { border-top:1px solid hsl(var(--border)); background:hsl(var(--background)); color:hsl(var(--foreground)); padding-block:52px; }
#view-landing .section--proof { background:hsl(var(--card)); }
#view-landing .heading-section, #view-landing .section-head h2 { color:hsl(var(--foreground)); }
#view-landing .gold, #view-landing .atlas-link, #view-landing .btn-ghost-gold { color:hsl(var(--gold-light)); }
#view-landing .btn-ghost-gold { border-color:hsl(var(--border)); text-transform:none; letter-spacing:normal; }
#view-landing .lede, #view-landing .eyebrow { color:hsl(var(--muted-foreground)); }
#view-landing .first-proof__pair a { background:hsl(var(--secondary)); }
#view-landing .first-proof__limit { color:hsl(var(--muted-foreground)); }
#view-landing #how #formats { --background:0 0% 100%; --card:0 0% 100%; --foreground:45 8% 10%; --muted-foreground:32 8% 34%; --border:36 27% 85%; border-radius:var(--pw-panel-radius); background:hsl(var(--card)); }
#view-landing #trust .ns { color:hsl(var(--foreground)); background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:var(--pw-control-radius); }
#view-landing #trust .ns b, #view-landing #trust .ns p { color:hsl(var(--foreground)); }
#view-landing .setting-edit article, #view-landing .acard, #view-landing .portrait-model { background:hsl(var(--card)); border-color:hsl(var(--border)); border-radius:var(--pw-control-radius); }
#view-landing .setting-edit button, #view-landing .acard__body, #view-landing .portrait-model__body { color:hsl(var(--foreground)); }
#view-landing .setting-edit button > span, #view-landing .setting-kind { color:hsl(var(--muted-foreground)); }
#view-landing .acard__kind, #view-landing .acard__meta { color:hsl(var(--muted-foreground)); }
#view-landing #atlas-search { background:hsl(var(--card)); color:hsl(var(--foreground)); }
#view-landing .cur__body, #view-landing .cur__result { color:hsl(var(--foreground)); }
#view-landing .cur__tabs button.is-on { color:hsl(var(--card)); }
#view-landing #final-cta .final { background:hsl(var(--secondary)); border:1px solid hsl(var(--border)); border-radius:var(--pw-panel-radius); padding:36px 20px; }
#view-landing #final-cta .zellij-field { display:none; }
#view-landing .studio-door > a { background:hsl(var(--card)); border-radius:var(--pw-control-radius); }
body:not(.in-app) > .site-footer { border-top:1px solid hsl(var(--border)); }
body:not(.in-app) > .site-footer a { color:hsl(var(--foreground)); }
body:not(.in-app) > .site-footer p, body:not(.in-app) > .site-footer .step-label { color:hsl(var(--muted-foreground)); }
@media(max-width:899px) {
  .pw-grid { grid-template-columns:1fr; gap:20px; }
  .pw-example { position:static; }
  .pw-facts { grid-template-columns:1fr 1fr; }
  #view-landing .portrait-workspace { padding-top:76px; }
}
@media(max-width:599px) {
  #view-landing .portrait-workspace { padding:70px 0 32px; }
  .portrait-workspace .page-shell { padding-inline:20px; }
  .pw-heading { margin-bottom:12px; }
  .pw-heading h1 { font-size:1.625rem; max-width:22ch; margin:auto; }
  .pw-heading > p { font-size:.9375rem; margin-top:6px; }
  .pw-desktop-copy, .pw-facts { display:none; }
  .pw-grid { gap:12px; }
  .pw-example { display:grid; grid-template-columns:128px minmax(0,1fr); align-items:center; gap:12px; padding:10px; border-radius:12px; }
  .pw-mount { padding:6px; }
  .pw-mount img { width:100%; max-height:none; }
  .pw-example figcaption { padding:0; }
  .pw-flag { font-size:.875rem; padding:3px 7px; }
  .pw-example h2 { font-size:1.5rem; margin-top:6px; }
  .pw-config { border:0; border-radius:0; background:none; padding:0; }
  .pw-steps { margin-bottom:8px; }
  .pw-steps button { padding:4px 8px; }
  .pw-panel { border:0; padding:0; margin-bottom:12px; }
  .pw-config.is-guided .pw-panel h3 { display:none; }
  .pw-options { gap:6px; }
  .pw-options button { padding:6px; }
  .pw-options--styles { grid-template-columns:1fr 1fr; }
  .pw-summary { margin-top:14px; }
  #view-landing > .section, #view-landing > .mapwrap { padding-block:36px; }
}
@media(max-width:359px) {
  .pw-example { grid-template-columns:100px minmax(0,1fr); gap:10px; }
  .pw-steps button span { margin-right:2px; }
}
@media(prefers-reduced-motion:reduce) { .portrait-workspace * { scroll-behavior:auto!important; transition:none!important; } }

/* Legacy dropzone rules make direct spans block-level; prices stay inline. */
#view-landing .pw-entry .herodrop__free span { display:inline; margin:0; font:inherit; color:inherit; }
#view-landing .pw-entry .pw-go { box-shadow:none; }
#view-landing .pw-entry .btn-shoot { border:0; background:none; }
@media(min-width:900px) { .pw-heading > p { max-width:none; } }
@media(max-width:599px) {
 #view-landing .portrait-workspace { padding-top:64px; }
 .pw-heading { margin-bottom:8px; }
 .pw-panel { margin-bottom:8px; }
}
/* Retained sections had explicit dark-surface colours outside semantic tokens. */
#view-landing .proof-note, #view-landing .portrait-collection__note,
#view-landing .portrait-collection__note a, #view-landing .acard__h { color:hsl(var(--foreground)); opacity:1; }
#view-landing .atlas__filters button.is-on, #view-landing .atlas__filters button[aria-pressed=true] { color:hsl(var(--card)); }
body:not(.in-app) .site-header .standing__btn, body:not(.in-app) .site-header .standing__short { color:hsl(var(--card)); }
body:not(.in-app) > .site-footer > .page-shell > p, body:not(.in-app) > .site-footer #foot-year { color:hsl(var(--foreground)); opacity:1; }

#view-landing .atlas__q.is-on { background:hsl(var(--gold)); color:hsl(var(--card)); }

#view-landing #how::before, #view-landing #how::after { content:none; }
#view-landing .btn-atlas { box-shadow:none; border-radius:var(--pw-control-radius); }
#view-landing #final-cta .final { min-height:0; box-shadow:none; }
#view-landing #final-cta .heading-section { max-width:26ch; text-shadow:none; }
#view-landing #final-cta .lede { text-shadow:none; }
#view-landing #final-cta .eyebrow { display:none; }
#view-landing .setting-edit button > :not(img) { margin-inline:16px; }
#view-landing .setting-edit button > .setting-edit__action { margin-bottom:12px; }
.pw-upload-error { font-size:.875rem; line-height:1.5; margin-top:8px; padding:12px; border:1px solid hsl(var(--gold)); background:hsl(var(--card)); color:hsl(var(--foreground)); }
#view-landing #how .step__n { color:hsl(var(--card)); }

/* Short desktop windows use the same guided panels as phones, preserving a
   visible primary action and a complete example without a second sticky CTA. */
@media(min-width:900px) and (max-height:820px) {
 .pw-mount img { max-height:min(360px,calc(100svh - 390px)); }
}

@media(min-width:600px) and (max-width:899px) {
 .pw-facts { display:none; }
 .pw-example { display:grid; grid-template-columns:180px minmax(0,1fr); gap:20px; align-items:center; }
 .pw-mount img { max-height:240px; }
 .pw-example figcaption { padding:0; }
}
/* Browse the full catalogue in place. Native dialog owns focus and inertness. */
.pw-more-button { display:block; min-height:44px; padding:0; border:0; background:none; color:hsl(var(--foreground)); font-family:var(--font-body); text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.pw-picker { width:min(1120px,calc(100vw - 40px)); height:min(860px,calc(100dvh - 40px)); max-width:none; max-height:none; padding:0; margin:auto; border:1px solid hsl(var(--border)); border-radius:var(--pw-panel-radius); background:hsl(var(--background)); color:hsl(var(--foreground)); overflow:hidden; }
.pw-picker:not([open]) { display:none; }
.pw-picker[open] { display:flex; flex-direction:column; }
.pw-picker::backdrop { background:hsl(var(--charcoal) / .5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.pw-picker__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 24px 12px; flex-shrink:0; }
.pw-picker__head h2 { font:400 2rem/1.1 var(--font-display); }
.pw-picker__head p { margin-top:6px; font-size:.875rem; line-height:1.5; color:hsl(var(--muted-foreground)); max-width:72ch; }
.pw-picker__head > button { flex:none; width:44px; height:44px; border:1px solid hsl(var(--border)); border-radius:var(--pw-control-radius); background:hsl(var(--card)); color:hsl(var(--foreground)); font-size:1.5rem; }
.pw-picker__tools { padding:0 24px 12px; flex-shrink:0; }
.pw-picker__tools label { display:block; font-size:.875rem; margin-bottom:6px; }
.pw-picker__tools input { display:block; width:100%; min-height:44px; border:1px solid hsl(var(--border)); border-radius:var(--pw-control-radius); padding:10px 12px; background:hsl(var(--card)); color:hsl(var(--foreground)); font:1rem/1.4 var(--font-body); }
.pw-picker__filters { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.pw-picker__filters button { min-height:44px; border:1px solid hsl(var(--border)); border-radius:var(--pw-control-radius); background:hsl(var(--card)); color:hsl(var(--foreground)); padding:6px 12px; font:.875rem/1.4 var(--font-body); }
.pw-picker__filters button[aria-pressed=true] { background:hsl(var(--foreground)); border-color:hsl(var(--foreground)); color:hsl(var(--card)); }
.pw-picker__body { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:20px; padding:0 24px; min-height:0; flex:1; }
.pw-picker__browse { min-width:0; overflow:auto; overscroll-behavior:contain; padding:3px 6px 12px 3px; }
#pw-picker-count { font-size:.875rem; margin-bottom:10px; color:hsl(var(--muted-foreground)); }
.pw-picker__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.pw-picker__grid button { display:flex; flex-direction:column; align-items:stretch; gap:4px; min-width:0; padding:8px; border:1px solid hsl(var(--border)); border-radius:var(--pw-control-radius); background:hsl(var(--card)); color:hsl(var(--foreground)); text-align:left; font:.875rem/1.35 var(--font-body); }
.pw-picker__grid button[aria-pressed=true] { border-color:hsl(var(--pw-blue)); box-shadow:inset 0 0 0 2px hsl(var(--pw-blue)); }
.pw-picker__grid img { display:block; width:100%; height:140px; object-fit:contain; background:hsl(var(--secondary)); margin-bottom:4px; }
.pw-picker__grid strong { font-weight:500; }
.pw-picker__grid span { color:hsl(var(--muted-foreground)); }
.pw-picker__grid .pw-picker__selected { color:hsl(var(--pw-blue)); font-weight:500; }
.pw-picker__preview { min-width:0; min-height:0; overflow:auto; overscroll-behavior:contain; margin:0; padding:3px 0 12px; }
.pw-picker__mount { display:flex; justify-content:center; align-items:center; padding:12px; background:hsl(var(--secondary)); border-radius:var(--pw-control-radius); }
.pw-picker__mount img { width:auto; max-width:100%; height:auto; max-height:340px; object-fit:contain; }
.pw-picker__preview figcaption { padding-top:12px; }
.pw-picker__preview h3 { font:400 1.75rem/1.1 var(--font-display); margin-top:10px; }
.pw-picker__preview p { font-size:.875rem; line-height:1.5; margin-top:6px; color:hsl(var(--muted-foreground)); }
#pw-picker-preview-status { color:hsl(var(--pw-blue)); font-weight:500; }
#pw-picker-empty { font-size:1rem; line-height:1.6; }
#pw-picker-empty button { display:block; min-height:44px; text-decoration:underline; color:hsl(var(--foreground)); background:none; border:0; }
.pw-picker__foot { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; gap:16px; padding:12px 24px; border-top:1px solid hsl(var(--border)); background:hsl(var(--card)); }
#pw-picker-current { font-size:1rem; font-weight:500; }
.pw-picker__foot nav { display:flex; flex-wrap:wrap; gap:0 16px; }
.pw-picker__foot a { display:inline-flex; align-items:center; min-height:44px; color:hsl(var(--foreground)); text-decoration:underline; font-size:.875rem; }
#view-landing .pw-picker .pw-go { flex:none; min-height:48px; padding:12px 20px; border:0; border-radius:var(--pw-control-radius); background:hsl(var(--gold)); color:hsl(var(--card)); font:500 1rem/1.4 var(--font-body); }
@media(max-width:699px) {
 .pw-picker { width:calc(100vw - 16px); height:calc(100dvh - 16px); border-radius:12px; }
 .pw-picker__head { padding:12px 12px 8px; gap:8px; }
 .pw-picker__head h2 { font-size:1.5rem; }
 .pw-picker__head p { font-size:.8125rem; }
 .pw-picker__tools { padding:0 12px 8px; }
 .pw-picker__tools label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .pw-picker__filters { gap:4px; }
 .pw-picker__filters button { padding:4px 8px; }
 .pw-picker__body { display:flex; flex-direction:column; gap:8px; padding:0 12px; }
 .pw-picker__preview { order:-1; display:grid; grid-template-columns:90px minmax(0,1fr); gap:12px; flex:none; max-height:180px; padding:0; }
 .pw-picker__mount { padding:4px; }
 .pw-picker__mount img { max-height:120px; }
 .pw-picker__preview figcaption { padding-top:0; }
 .pw-picker__preview h3 { font-size:1.375rem; margin-top:6px; }
 .pw-picker__preview p { font-size:.8125rem; margin-top:4px; }
 .pw-picker__preview .pw-flag { font-size:.75rem; padding:3px 5px; }
 .pw-picker__browse { flex:1; min-height:0; }
 .pw-picker__grid { grid-template-columns:1fr 1fr; gap:8px; }
 .pw-picker__grid img { height:120px; }
 .pw-picker__foot { padding:10px 12px; }
 .pw-picker__foot > div { display:none; }
 #view-landing .pw-picker .pw-go { width:100%; }
}
/* At enlarged text, let the complete dialog scroll rather than crowding artwork. */
.pw-picker.is-large-type { overflow:auto; }
.pw-picker.is-large-type .pw-picker__body { flex:none; display:flex; flex-direction:column; }
.pw-picker.is-large-type .pw-picker__browse, .pw-picker.is-large-type .pw-picker__preview { overflow:visible; max-height:none; }
.pw-picker.is-large-type .pw-picker__preview { display:block; order:-1; }
.pw-picker.is-large-type .pw-picker__foot { position:static; flex-wrap:wrap; }
.pw-picker.is-large-type .pw-picker__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.pw-picker__grid strong { overflow-wrap:anywhere; }
.pw-picker__head > button { line-height:1; }
@media(min-width:700px) and (max-height:820px) {
 .pw-picker__mount img { max-height:clamp(100px,calc(100dvh - 400px),340px); }
}
.pw-picker__preview:focus-visible, .pw-picker__browse:focus-visible { outline:3px solid hsl(var(--pw-blue)); outline-offset:-3px; }

/* Working surfaces continue the same canvas, panel and action language. */
body:has(:is(#view-create,#view-studio,#view-order).is-on) {
  --radius:8px; --r:8px; --r-pill:8px; --primary:12 61% 44%;
  --popover:0 0% 100%; --ring:228 59% 41%; --accent:12 61% 38%;
  color-scheme:light; caret-color:hsl(var(--pw-blue));
  scrollbar-color:hsl(var(--border)) hsl(var(--background));
}
body:has(:is(#view-create,#view-studio,#view-order).is-on) ::selection { background:hsl(228 59% 88%); color:hsl(var(--foreground)); }
body.in-app > .site-header { background:hsl(var(--card)); backdrop-filter:none; }
body.in-app .site-header__inner { height:56px; }
body.in-app .site-header .wordmark, body.in-app .site-header .home-nav a { color:hsl(var(--foreground)); }
body.in-app .site-header .wordmark small { display:none; }
body.in-app .site-header :is(.acct,.menubtn) { background:hsl(var(--card)); color:hsl(var(--foreground)); border-color:hsl(var(--border)); }
.site-header .home-nav a[aria-current=page] { text-decoration:underline; text-underline-offset:6px; color:hsl(var(--gold-light)); }
body:has(:is(#view-create,#view-studio,#view-order).is-on) :is(.sheet__body,.acct__menu,.sitemenu__sheet) { background:hsl(var(--card)); color:hsl(var(--foreground)); border-color:hsl(var(--border)); }
body:has(:is(#view-create,#view-studio,#view-order).is-on) :is(.sheet,.sitemenu) { --r:8px; --radius:8px; }
:is(#view-create,#view-studio,#view-order) :is(button,a,input,textarea,select,summary):focus-visible { outline:3px solid hsl(var(--pw-blue)); outline-offset:3px; }
:is(#view-create,#view-studio,#view-order,.sheet) .btn-atlas {
  background:hsl(var(--gold)); color:#fff; border-color:hsl(var(--gold)); border-radius:8px;
  text-transform:none; letter-spacing:normal; box-shadow:none; transform:none;
}
:is(#view-create,#view-studio,#view-order,.sheet) .btn-atlas:hover { background:hsl(var(--gold-dark)); box-shadow:none; filter:none; transform:none; }
:is(#view-create,#view-studio,#view-order) .btn-ghost-gold { background:hsl(var(--card)); color:hsl(var(--foreground)); border-color:hsl(var(--border)); border-radius:8px; }
:is(#view-create,#view-studio,#view-order) .btn-quiet { color:hsl(var(--gold-light)); }
:is(#view-create,#view-studio,#view-order) :is(input,textarea,select) { background:hsl(var(--card)); color:hsl(var(--foreground)); border-color:hsl(var(--border)); border-radius:8px; }
:is(#view-create,#view-studio,#view-order) :is(input,textarea)::placeholder { color:hsl(var(--muted-foreground)); opacity:1; }
#view-create .studio, #view-create.is-step3 .studio { background:hsl(var(--background)); }
#view-create .studio { padding-top:56px; }
#view-create .flowbar { top:56px; background:hsl(var(--card)); box-shadow:none; backdrop-filter:none; }
#view-create.is-step3 .flowbar { top:0; background:hsl(var(--card)); }
#view-create .flowbar__inner { padding-block:12px; }
#view-create .studio__grid { max-width:1200px; }
#view-create .deck { background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:14px; padding:24px; }
#view-create.is-step3 .deck { background:transparent; padding:0; border:0; border-radius:0; }
#view-create .wall { background:hsl(var(--secondary)); box-shadow:none; border-radius:14px; }
#view-create .stage__inner { top:148px; }
#view-create .srail__dot, #view-create.is-step3 .srail__dot { background:hsl(var(--card)); color:hsl(var(--foreground)); border-color:hsl(var(--border)); font-family:var(--font-body); }
#view-create .srail.is-now .srail__dot, #view-create .srail.is-done .srail__dot { background:hsl(var(--pw-blue)); border-color:hsl(var(--pw-blue)); color:#fff; box-shadow:none; }
#view-create .srail__label, #view-create .srail.is-done .srail__label { color:hsl(var(--muted-foreground)); }
#view-create .srail.is-now .srail__label { color:hsl(var(--pw-blue)); }
#view-create .steps-rail::after { background:hsl(var(--pw-blue)); }
#view-create :is(.drop,.petcard,.look,.opts,.fixbox,.fmt,.deliver) { border-radius:8px; background:hsl(var(--card)); border-color:hsl(var(--border)); }
#view-create .drop { background:hsl(var(--background)); border-style:dashed; }
#view-create :is(.pick,.pick-curated) { border-radius:8px; background:hsl(var(--card)); }
#view-create :is(.pick,.chip-st,.fmt).is-sel, #view-create .chip-st.is-on { border-color:hsl(var(--pw-blue)); }
#view-create.is-step3 .chip-st.is-on { background:hsl(var(--pw-blue)); color:#fff; }
#view-create .placechip { background:hsl(var(--background)); border-color:hsl(var(--border)); border-radius:8px; }
#view-create :is(.placechip__n,.placechip__go,.look__title) { color:hsl(var(--foreground)); }
#view-create .payrow, #view-create.is-step3 .payrow { background:hsl(var(--card)); }
#view-create .stage__bar { background:hsl(var(--card)); }
#view-create .wall__tag { color:hsl(var(--foreground)); background:hsl(var(--card)); }
#view-create .fmt__price, #view-create .stylepick__k span { color:hsl(var(--gold-light)); }
#view-studio > .page-shell { max-width:1200px; padding-top:88px!important; }
.pw-breadcrumb { margin-bottom:20px; font:.875rem/1.5 var(--font-body); }
.pw-breadcrumb a { display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:4px; }
#view-studio .pane-head { text-align:left; padding-bottom:24px; }
#view-studio .pane-head :is(p,h2) { text-align:left!important; margin-left:0!important; max-width:70ch; }
#view-studio .pane-head h2 { font-size:clamp(1.75rem,3.2vw,2.75rem); letter-spacing:-.025em; }
#view-studio .pane-head .rosette { display:none; }
#view-studio .studio-entry { justify-content:flex-start; }
#view-studio :is(.studio-next,.balance,.lookup,.empty,.studio-status,.sitem,.pcard) { background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:14px; box-shadow:none; }
#view-studio .studio-next { margin-top:0; padding:20px; }
#view-studio .studio-next .eyebrow { display:none; }
#view-studio .studio-tabs { justify-content:flex-start; margin-block:24px; border-bottom:1px solid hsl(var(--border)); padding-bottom:16px; }
#view-studio .studio-tabs button { background:hsl(var(--card)); color:hsl(var(--foreground)); border-radius:8px; }
#view-studio .studio-tabs button.is-on, #view-studio .collection-filters button.is-on { color:hsl(var(--pw-blue)); border-color:hsl(var(--pw-blue)); background:hsl(228 59% 97%); }
#view-studio .collection-filters { justify-content:flex-start; }
#view-studio .pcard__owned { background:hsl(var(--pw-blue)); color:#fff; }
#view-studio .pcard__mark { color:white; }
#view-studio .pcard figcaption > span { color:hsl(var(--muted-foreground)); }
#view-studio .pcard__img { background:hsl(var(--secondary)); }
#view-studio .pcard__img img { aspect-ratio:2/3; object-fit:contain; }
#view-studio :is(.studio-starts > a,.studio-favourites) { border-radius:8px; background:hsl(var(--card)); border-color:hsl(var(--border)); }
#view-studio .studio-favourites { padding:24px; margin-top:32px; border:1px solid hsl(var(--border)); }
#view-studio .studio-favourites > p { max-width:70ch; }
#view-studio :is(.balance,.lookup,.empty) { padding:24px; }
#view-studio .balance__n { color:hsl(var(--gold-light)); }
#view-studio .pane-act__n { font:.875rem/1.5 var(--font-body); letter-spacing:normal; text-transform:none; }
@media(max-width:760px) {
  #view-create .deck { padding:20px; }
  #view-create .flowbar__inner { padding-block:12px 20px; }
  #view-create .studio__grid { gap:20px; padding-top:20px; }
  #view-studio > .page-shell { padding-top:72px!important; }
  #view-studio .pw-breadcrumb { margin-bottom:12px; }
  #view-studio :is(.studio-next,.studio-favourites,.balance,.lookup,.empty) { padding:16px; }
  #view-studio .studio-tabs { gap:8px; }
  #view-studio .studio-tabs button { letter-spacing:normal; }
}
/* Enlarged text already unpins the creator chrome in the shared layout. */
body.creator-unpinned #view-create .studio { padding-top:0; }
body.creator-unpinned #view-create .flowbar { top:0; }

#view-studio .studio-entry button { color:hsl(var(--gold-light)); }
#view-studio .studio-status { padding:16px; margin-bottom:20px; }
#view-studio .studio-next { max-width:none; margin-inline:0; }
#view-create .locked__seal { background:hsl(var(--pw-blue)); color:#fff; }
#view-create .styletile.is-on { border-color:hsl(var(--pw-blue)); background:hsl(228 59% 97%); box-shadow:none; }
#view-create .styletile.is-on .styletile__n { color:hsl(var(--pw-blue)); }
@media(max-width:760px) {
  #view-create:not(.is-step3) .flowbar__inner { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; padding-block:12px 20px; }
  #view-create:not(.is-step3) .placechip { display:none; }
  #view-create:not(.is-step3) .steps-rail { order:0; padding-inline:0; }
  #view-create:not(.is-step3) #flow-exit { max-width:140px; padding-inline:10px; text-align:center; }
}

#view-create { --cream:38 44% 96%; --charcoal:45 8% 10%; }
#view-studio .btn-danger { color:hsl(var(--gold-dark)); border-color:hsl(var(--gold-dark)); }

#view-create .trust a { text-decoration:underline; text-underline-offset:3px; }
body.in-app .site-header .acct:has(#acct-btn[hidden]):has(#acct-signin[hidden]) { display:none; }

/* A return to discovery keeps personal work distinct from public examples. */
#workspace-resume { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px 20px; padding:12px 16px; margin-bottom:20px; background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:8px; }
#workspace-resume[hidden], #workspace-resume a[hidden] { display:none; }
#workspace-resume p { font:.875rem/1.5 var(--font-body); max-width:65ch; }
#workspace-resume nav { display:flex; flex-wrap:wrap; gap:16px; }
#workspace-resume a { display:inline-flex; align-items:center; min-height:44px; font:.875rem/1.4 var(--font-body); color:hsl(var(--gold-light)); text-decoration:underline; text-underline-offset:4px; }

#view-create .fixbox__count { color:hsl(var(--muted-foreground)); }

/* Shared portrait utilities must own their light surfaces, including open dialogs. */
body:has(:is(#view-landing,#view-create,#view-studio,#view-order).is-on) :is(.sitemenu__sheet,.sheet__body,.acct__menu) {
  background:hsl(var(--card)); color:hsl(var(--foreground)); box-shadow:none;
}
body:has(:is(#view-landing,#view-create,#view-studio,#view-order).is-on) .acct__menu { --foreground:45 8% 10%; --card:0 0% 100%; --gold:12 61% 44%; --gold-light:12 61% 38%; }
body:has(:is(#view-landing,#view-create,#view-studio,#view-order).is-on) .btn-google { color:hsl(var(--foreground)); background:hsl(var(--card)); border:1px solid hsl(32 8% 50%); border-radius:8px; min-height:44px; }
body:has(:is(#view-landing,#view-create,#view-studio,#view-order).is-on) .sitemenu__sheet { opacity:1; }
body:has(:is(#view-landing,#view-create,#view-studio,#view-order).is-on) .sitemenu :is(a,.menulink) { font-family:var(--font-body); font-size:1rem; letter-spacing:normal; }
body:has(:is(#view-landing,#view-create,#view-studio,#view-order).is-on) .sitemenu :is(.menugroup__k,.menugroup__note,.sitemenu__cta p) { font-size:.875rem; letter-spacing:normal; text-transform:none; }
body:has(:is(#view-landing,#view-create,#view-studio,#view-order).is-on) .site-header .acct:has(#acct-btn[hidden]):has(#acct-signin[hidden]) { display:none; }
.site-header .acct__signin { font-size:.875rem; letter-spacing:normal; text-transform:none; }
#view-studio :is(.balance__rule,.studio-sync,.lookup__p,.pcard__details,.pcard__expiry,.studio-favourites p), #view-create .stylepick__note { font-size:.875rem; line-height:1.55; }
#view-studio .btn-danger { font:.875rem/1.5 var(--font-body); text-transform:none; letter-spacing:normal; min-height:44px; padding:10px 16px; }
#view-studio button:disabled { cursor:default; opacity:.55; }
#view-create :is(.petcard__memory,.giftbox__on) { min-height:44px; }
#view-create :is(.petcard__memory,.giftbox__on) input { appearance:auto; width:20px; height:20px; accent-color:hsl(var(--pw-blue)); border:2px solid hsl(var(--muted-foreground)); }
#view-create .optional-label { font-size:.875rem; color:hsl(var(--muted-foreground)); }
#view-studio .lookup__row { flex-wrap:wrap; }
.order-reference-label { flex-basis:100%; font-size:.875rem; }
#view-studio #lookup-ref { text-transform:none; letter-spacing:normal; font:1rem/1.5 var(--font-body); }
#view-studio .pane-head { padding-bottom:12px; }
#view-studio .pane-head .lede { margin-top:8px!important; }
#view-studio .studio-entry { display:inline-flex; margin:4px 0 0; gap:16px; }
#view-studio .studio-sync { margin-top:8px; }
.studio-device-help { max-width:65ch; }
.studio-device-help summary { min-height:44px; display:flex; align-items:center; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
#view-studio .studio-status { padding:8px 0; margin:8px 0 16px; background:transparent; border:0; border-bottom:1px solid hsl(var(--border)); border-radius:0; }
#view-studio .studio-status p { font-size:.875rem; }
#view-studio .studio-tabs { margin-block:12px; padding-bottom:8px; }
#view-studio .studio-tabs button { padding:10px 14px; font-size:.875rem; }
#view-studio .studio-next { padding:16px; margin-bottom:16px; }
#view-studio .studio-next img { width:80px; height:120px; object-fit:contain; }
#view-studio #studio-empty-starts { display:block; }
.studio-other-art { margin-top:12px; }
.studio-other-art summary { min-height:44px; cursor:pointer; font-size:.875rem; }
.studio-other-art > div { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.studio-other-art a { display:grid; gap:8px; padding:12px; border:1px solid hsl(var(--border)); border-radius:8px; }
.studio-other-art img { height:120px; width:100%; object-fit:contain; }
.studio-other-art small { font-size:.875rem; }
.filter-label { flex-basis:100%; font-size:.875rem; color:hsl(var(--muted-foreground)); }
.filter-label--status { margin-top:8px; }
#workspace-resume { gap:8px 16px; }
#workspace-resume-image { width:56px; height:72px; object-fit:contain; }
#workspace-resume p { flex:1; }
#workspace-resume nav { align-items:center; }
#workspace-resume-portrait { padding:10px 16px; border-radius:8px; color:#fff!important; background:hsl(var(--gold)); font-weight:600!important; text-decoration:none!important; }
#workspace-resume-image[hidden] { display:none; }
.retry-consequence { display:none; font:.875rem/1.6 var(--font-body); margin:12px 0; }
.is-failed-preview .retry-consequence { display:block; }
.retry-consequence a { text-decoration:underline; }
#view-create.is-failed-preview #repaint { background:hsl(var(--gold)); border-color:hsl(var(--gold)); color:#fff; }
#view-create .pay-selection:empty { display:none; }
#view-create .pay-selection { font-size:.875rem; }
#attempt-comparison .style-comparison__image img { max-height:45dvh; }
#attempt-comparison [aria-pressed=true]:disabled { opacity:1; border-color:transparent; background:transparent; }
#attempt-comparison :is(p,select,button) { font-size:.875rem; }
#view-create #prestyle-row .styletile__detail { font-size:.875rem; line-height:1.4; }
@media(max-width:999px) {
  #view-create.is-personal-preview:not(.is-reviewing):not(.is-keeping) .wall__art { width:fit-content!important; margin-inline:auto; }
  #view-create.is-personal-preview:not(.is-reviewing):not(.is-keeping) .wall__art img { width:auto; max-width:100%; max-height:clamp(120px,49dvh,calc(100dvh - 300px)); object-fit:contain; }
  #view-create.is-failed-preview .deck { order:-1; }
  #view-create.is-failed-preview .wall__art { width:fit-content!important; margin-inline:auto; }
  #view-create.is-failed-preview .wall__art img { max-height:22dvh; width:auto; object-fit:contain; }
  #view-create.is-working-preview .stage__bar { display:none!important; }
  #view-create .wait-guide { font-size:.875rem; }
  #view-create .wait-guide p + p { margin-top:8px; }
  .proof-viewer:not(.is-zoomed) .proof-viewer__canvas img { width:auto; height:auto; max-width:100%; max-height:65dvh; object-fit:contain; }
}
@media(max-width:760px) {
  #view-create .flowbar__inner, #view-create:not(.is-step3) .flowbar__inner, #view-create.is-step3 .flowbar__inner { display:grid; grid-template-columns:minmax(0,1fr) auto; flex-wrap:nowrap; gap:12px; padding-block:8px; }
  #view-create .placechip { display:none; }
  #view-create .steps-rail, #view-create.is-step3 .steps-rail { order:0; padding:0; width:auto; }
  #view-create #flow-exit { order:1; min-height:44px; padding:8px 12px; max-width:100px; font-size:.875rem; }
  #view-create .srail__dot { width:24px; height:24px; }
  #view-create .stage__inner { top:auto; }
  #view-create.is-step3 .stage__cap, #view-create.is-step3 .stage__zoom { font-size:.875rem; }
  #view-create .likeness-actions { margin-top:8px; }
  #view-create .likeness-money { margin-top:8px; font-size:.875rem; }
  #view-studio > .page-shell { padding-top:60px!important; }
  #view-studio .pw-breadcrumb { margin-bottom:4px; }
  #view-studio .pane-head .lede { font-size:.875rem; line-height:1.4; }
  #view-studio .studio-next { gap:12px; }
  #view-studio .studio-next img { width:64px; height:96px; }
  #view-studio .studio-next h3 { font-size:1.125rem; }
  #view-studio .studio-next p { font-size:.875rem; }
  #view-studio .studio-next .btn-atlas { min-height:44px; padding:10px 12px; }
  #view-studio .studio-status { flex-direction:row; align-items:center; }
  #workspace-resume { padding:12px; }
  #workspace-resume p { font-size:.875rem; }
  #workspace-resume nav { flex-basis:100%; }
  #workspace-resume-portrait { flex:1; justify-content:center; }
}
@media(max-width:420px) {
  #view-create #prestyle-row { grid-template-columns:1fr 1fr; }
  #view-create .styletile__detail { font-size:.875rem; }
}
/* At large text or with a keyboard, all content scrolls instead of being squeezed. */
body.creator-unpinned #view-create.is-personal-preview .wall__art img { max-height:none; }
@media(max-height:500px) { #view-create .payrow { position:static!important; } }
#proof-view-toggle { min-height:44px; font:.875rem/1.4 var(--font-body); text-decoration:underline; text-underline-offset:4px; }
#attempt-comparison .inspect-caption { display:block; padding:8px; font:.875rem/1.4 var(--font-body); text-decoration:underline; text-underline-offset:4px; }
#proof-viewer:not(.is-zoomed) .proof-viewer__canvas { min-height:65dvh; display:flex; align-items:center; justify-content:center; }
#proof-viewer .proof-viewer__canvas[hidden] { display:none; }
body:has(:is(#view-landing,#view-create,#view-studio,#view-order).is-on) .site-header :is(.acct__signin,.home-nav a) { font-size:.875rem; }
.skip-link { font-size:.875rem; color:hsl(45 8% 10%); background:#fff; letter-spacing:normal; text-transform:none; }
.proof-viewer.is-compact .proof-viewer__tabs > #proof-view-toggle:not([hidden]) { display:inline-flex; }
@media(max-width:760px) {
  body:has(:is(#view-landing,#view-create,#view-studio,#view-order).is-on) .site-header .acct:has(#acct-btn[hidden]) { display:none; }
}
/* The static bundle precedes inline legacy rules; use the actual image ID. */
@media(max-width:999px) {
  #view-create.is-personal-preview:not(.is-reviewing):not(.is-keeping) #stage-img { width:auto; height:auto; max-width:100%; max-height:clamp(120px,49dvh,calc(100dvh - 300px)); }
}
body.creator-unpinned #view-create.is-personal-preview #stage-img { max-height:none; }
@media(max-width:760px) {
  #view-studio #studio-tabs { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,4.5rem),1fr)); gap:6px; }
  #view-studio #studio-tabs button { min-width:0; padding:8px 4px; min-height:52px; overflow-wrap:anywhere; white-space:normal; }
}
#view-studio .studio-next > div { min-width:0; overflow-wrap:anywhere; }
#view-studio .pane-act { flex-wrap:wrap; }
#view-studio .pane-act a { max-width:100%; white-space:normal; text-align:center; overflow-wrap:anywhere; }
#view-studio .studio-status { flex-wrap:wrap; }
#view-studio #studio-empty-action { margin:12px 0; min-height:48px; }
#attempt-comparison .btn-atlas { color:#fff; background:hsl(var(--gold)); border-color:hsl(var(--gold)); border-radius:8px; text-transform:none; letter-spacing:normal; box-shadow:none; }
#attempt-comparison .btn-atlas:hover { background:hsl(var(--gold-dark)); }

#view-studio .studio-payments { max-width:640px; margin:2rem auto; padding:1.5rem; border:1px solid hsl(var(--border)); border-radius:var(--pw-panel-radius); background:hsl(var(--card)); }
#view-studio .studio-payments h3 { margin:0 0 .75rem; font:600 1.25rem/1.4 var(--font-body); }
#view-studio .studio-payments p { font-size:1rem; line-height:1.6; overflow-wrap:anywhere; }
#view-studio .studio-payments .muted { font-size:.875rem; }
#view-studio #billing-cards { padding:0; list-style:none; }
#view-studio #billing-cards li { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; border-block-end:1px solid hsl(var(--border)); }
#view-studio #billing-cards small { display:block; color:hsl(var(--muted-foreground)); margin-top:.25rem; }
#view-studio #billing-cards button { min-height:44px; flex:none; }
#view-studio .studio-payment-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin:1rem 0; }
#view-studio .studio-payment-actions button { white-space:normal; max-width:100%; }
#view-studio .studio-order-download { padding:0 1rem 1rem; }
#view-studio .studio-order-download button { width:100%; white-space:normal; }
#view-studio .studio-order-download p { font-size:.875rem; line-height:1.6; }
#view-studio .studio-order-download .buying-help { display:block; padding-top:.75rem; }
#view-order #ord-delivery-help p { line-height:1.65; }
#view-studio .studio-settings-intro { max-width:640px; margin:1.5rem auto; }
#view-studio .studio-settings-intro h3 { font:600 1.25rem/1.4 var(--font-body); }
#view-studio .studio-settings-intro p { margin:.5rem 0 0; font-size:.875rem; }
#view-studio .studio-settings-actions { max-width:640px; margin:1.5rem auto; }

/* The menu is a sibling of the working view, so it owns its button foreground. */
#sitemenu .sitemenu__cta .btn-atlas { color:hsl(0 0% 100%); background:hsl(var(--gold)); text-transform:none; letter-spacing:normal; font-size:1rem; border-radius:var(--pw-control-radius,8px); }
#sitemenu .sitemenu__cta .btn-atlas:hover { background:hsl(var(--gold-dark)); }
#sitemenu .sitemenu__cta .btn-atlas:focus-visible { outline:3px solid hsl(var(--pw-blue,228 59% 41%)); outline-offset:3px; }
#sitemenu .sitemenu__cta p, #view-studio .studio-order-review, #view-studio .billing-note { font-size:.875rem; line-height:1.5; }
#view-studio .studio-order-review { padding:12px 16px 0; color:hsl(var(--muted-foreground)); }
#studio-favourites { scroll-margin-top:5rem; }
#view-studio #billing-add.btn-ghost-gold { color:hsl(var(--foreground)); background:hsl(var(--card)); border-color:hsl(var(--muted-foreground)); }

#view-create #paid-recovery { margin-top:1rem; padding:1.25rem; border:1px solid hsl(var(--border)); border-radius:var(--pw-panel-radius); box-shadow:none; overflow-wrap:anywhere; font:1rem/1.6 var(--font-body); color:hsl(var(--foreground)); background:hsl(var(--card)); }
#paid-recovery h3 { font:600 1.125rem/1.3 var(--font-body); margin:0 0 .75rem; }
#paid-recovery p + p { margin-top:.75rem; }
#paid-recovery-reference { font-weight:600; }
#paid-recovery a { display:inline-flex; align-items:center; min-height:44px; margin-top:.5rem; }
/* A known purchase has a recovery task, not a second purchase form. */
#view-create.is-paid-recovery :is(#order-body,#new-portrait-note,#proof-availability,#p3-proof-status) { display:none!important; }
#view-create.is-paid-recovery #paid-recovery { border-color:hsl(var(--pw-blue)); margin-bottom:1.5rem; }
#view-create #paid-recovery-review { display:flex; margin-top:.75rem; font-size:.875rem; }
#view-create #pay-err { width:100%; margin:0 0 .75rem; padding:1rem; border:1px solid hsl(var(--gold)); border-radius:var(--pw-control-radius); background:hsl(var(--card)); color:hsl(var(--foreground)); font:1rem/1.6 var(--font-body); }
#view-create .payrow:has(#pay-err:not([hidden])) { flex-wrap:wrap; }
#view-create .payrow:has(#pay-err:not([hidden])) #pay { width:100%; }
.site-footer :is(p,a,.step-label) { font-size:.875rem; line-height:1.6; }
#view-studio :is(.ledger__row,.ledger__k,.ledger__note,.credits__note,.sitem__meta,.sitem__st,.studio-status) { font-size:.875rem; line-height:1.5; letter-spacing:normal; text-transform:none; }
#view-studio .studio-order-next { padding:0 1rem 1rem; font-size:.875rem; line-height:1.6; }
#view-studio .studio-order-next p { margin-bottom:.5rem; color:hsl(var(--muted-foreground)); }