/* SLP Media site styles, shared by every page. Tokens first, then the
   base, the nav and footer, the event pages (home, /packages, /book), the
   studio pages under /studios and the survey pages. No text is smaller than
   12px, and every link and control is at least 44px tall where it can be. */
  :root {
    color-scheme: dark;
    --ink: #050505;
    --paper: #F2EDE4;
    --body: rgba(242, 237, 228, 0.82);
    --muted: #9C958A;
    --dim: #8A8378; /* 5:1 or better on the page with the grain over it */
    --glass: rgba(255, 255, 255, 0.055);
    --glass-strong: rgba(255, 255, 255, 0.09);
    --edge: rgba(242, 237, 228, 0.12);
    --edge-strong: rgba(242, 237, 228, 0.28);
    --prism-a: #9BE7FF;
    --prism-b: #C9B3FF;
    --warn: #FFB4A3;
    --sans: "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --label: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --gutter: clamp(16px, 4vw, 40px);
    --nav-h: 76px;
  }
  * { box-sizing: border-box; }
  html { background: var(--ink); scroll-padding-top: calc(var(--nav-h) + 16px); }
  body {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-height: 100%;
  }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; height: auto; }
  :focus-visible { outline: 2px solid var(--prism-a); outline-offset: 3px; }
  a:focus-visible { border-radius: 6px; }
  ::selection { background: rgba(155, 231, 255, 0.35); color: #fff; }
  .sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

  /* skip link: hidden until it has keyboard focus */
  .skip {
    position: absolute; left: 16px; top: -120px; z-index: 100;
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 12px;
    background: var(--paper); color: var(--ink); font-weight: 600;
  }
  .skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

  /* ---- background ---- */
  #trails {
    position: fixed; inset: 0; width: 100%; height: 100%;
    display: block; z-index: 0; pointer-events: none;
  }
  .grain {
    position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.045;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
    background-size: 160px 160px;
  }

  /* ---- nav ---- */
  .nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 10;
    padding: calc(12px + env(safe-area-inset-top, 0px)) var(--gutter) 0;
    display: flex; justify-content: center;
  }
  .pill {
    width: min(760px, 100%);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 6px 6px 6px 18px;
    border-radius: 999px;
    background: rgba(12, 12, 12, 0.62);
    border: 1px solid var(--edge);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  }
  .pill > a:first-child { display: inline-flex; align-items: center; min-height: 44px; border-radius: 10px; }
  .wordmark { height: 30px; width: auto; display: block; color: var(--paper); }
  .nav-links { display: flex; align-items: center; gap: 4px; }
  .nav-link {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
    font-family: var(--label); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); padding: 0 14px; border-radius: 999px; white-space: nowrap;
    transition: color 200ms ease, background-color 200ms ease;
  }
  .nav-link:hover { color: var(--paper); background: var(--glass); }
  .nav-link[aria-current="page"] { color: var(--paper); }
  .nav-link.nav-cta { background: var(--paper); color: var(--ink); padding: 0 18px; }
  .nav-link.nav-cta:hover { background: #fff; color: var(--ink); }
  .nav-link:focus-visible { border-radius: 999px; }
  @media (max-width: 380px) {
    .pill { padding-left: 14px; }
    .wordmark { height: 26px; }
    .nav-link { padding: 0 11px; letter-spacing: 0.1em; }
    .nav-link.nav-cta { padding: 0 14px; }
  }

  /* ---- shared type and buttons ---- */
  main { position: relative; z-index: 2; }
  h1 {
    margin: 0;
    font-weight: 500;
    font-size: clamp(2.1rem, 6.4vw, 4.6rem);
    line-height: 1.06;
    letter-spacing: -0.035em;
    text-wrap: balance;
    text-shadow: 0 0 60px rgba(0, 0, 0, 0.9);
  }
  .sub {
    margin: 0; max-width: 34ch;
    color: rgba(242, 237, 228, 0.8); font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.5;
    text-wrap: balance; text-shadow: 0 0 24px rgba(5, 5, 5, 0.95), 0 0 48px rgba(5, 5, 5, 0.9);
  }
  .cta {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px;
    background: var(--paper); color: var(--ink); border: 0; cursor: pointer;
    font: inherit; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em;
    padding: 13px 24px 13px 28px; border-radius: 13px;
    box-shadow: 0 10px 40px rgba(242, 237, 228, 0.14), inset 0 -1px 0 rgba(0,0,0,0.08);
    transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease, opacity 200ms ease;
  }
  .cta svg { width: 18px; height: 18px; transition: transform 220ms cubic-bezier(.2,.8,.2,1); }
  .cta:hover { transform: translateY(-1px); box-shadow: 0 16px 50px rgba(242, 237, 228, 0.22), inset 0 -1px 0 rgba(0,0,0,0.08); }
  .cta:hover svg { transform: translateX(4px); }
  .cta:active { transform: translateY(0); }
  .cta:disabled { opacity: 0.7; cursor: default; transform: none; }
  .cta:focus-visible { outline: 2px solid var(--prism-a); outline-offset: 3px; border-radius: 13px; }
  .cta.link { background: transparent; color: var(--paper); box-shadow: none; border: 1px solid var(--edge-strong); padding: 12px 22px; }
  .cta.link:hover { background: var(--glass); box-shadow: none; }
  .actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 18px; margin-top: 4px; }
  .actions.start { justify-content: flex-start; }
  .note {
    margin: 0; min-height: 1.4em; font-size: 0.92rem; color: var(--muted);
    text-shadow: 0 0 20px rgba(5, 5, 5, 0.95);
  }
  .note a { color: var(--paper); border-bottom: 1px solid var(--edge-strong); }
  .quiet { margin: 0; color: var(--muted); font-size: 0.92rem; }
  .quiet a { color: var(--paper); border-bottom: 1px solid var(--edge-strong); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }

/* ---- event pages: home, /packages, /book ---- */
.ev { padding: calc(var(--nav-h) + 40px + env(safe-area-inset-top, 0px)) var(--gutter) 0; }
.ev > section, .crumbs { width: min(1040px, 100%); margin-left: auto; margin-right: auto; }
.ev h1 { font-size: clamp(2.2rem, 5.2vw, 3.7rem); }
.ev .sub { max-width: none; font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--paper); text-shadow: none; }

.crumbs { margin-bottom: 18px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 0.9rem; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; color: var(--dim); margin: 0 10px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); border-bottom: 0; text-decoration: underline; text-decoration-color: var(--edge-strong); text-underline-offset: 4px; }
.crumbs [aria-current="page"] { color: var(--muted); }

.hero-ev { display: grid; gap: 40px; align-items: start; padding-bottom: 32px; }
@media (min-width: 900px) {
  .hero-ev.with-photo { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 56px; }
}
.lede { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.answer { margin: 4px 0 0; max-width: 64ch; color: var(--body); font-size: 1.08rem; line-height: 1.62; text-wrap: pretty; }
.answer a, .prose a, .more a, .fine a, .facts a, .card-ev a, .form-foot a {
  color: var(--paper); text-decoration: underline; text-decoration-color: var(--edge-strong); text-underline-offset: 3px;
}
.answer a:hover, .prose a:hover, .more a:hover, .fine a:hover, .facts a:hover, .card-ev a:hover, .form-foot a:hover { text-decoration-color: var(--paper); }

.facts {
  border: 1px solid var(--edge); border-radius: 20px; padding: 18px 20px 8px;
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
.facts-h { margin: 0 0 6px; font-weight: 600; font-size: 1rem; color: var(--paper); }
.facts dl { margin: 0; }
.facts dl > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); align-content: start; gap: 4px 16px; padding: 11px 0; border-top: 1px solid var(--edge); }
.facts dl > div:first-child { border-top: 0; }
.facts dt { color: var(--muted); font-size: 0.95rem; }
.facts dd { margin: 0; color: var(--paper); font-size: 0.95rem; line-height: 1.5; }
@media (max-width: 520px) {
  .facts { padding: 16px 16px 6px; }
  .facts dl > div { grid-template-columns: 1fr; gap: 2px; }
}
@media (min-width: 1000px) {
  .facts dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .facts dl > div { grid-template-columns: 1fr; gap: 2px; }
  .facts dl > div:nth-child(2) { border-top: 0; }
}
.updated { margin: 0; color: var(--muted); font-size: 0.9rem; }
.fine { margin: 0; max-width: 60ch; color: var(--muted); font-size: 0.92rem; }

/* photo with the viewfinder brackets from the SelfSearch AI mark */
.photo { position: relative; margin: 0; padding: 14px; }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; background: #111; }
.photo::before, .photo::after, .photo .b1, .photo .b2 {
  content: ""; position: absolute; width: 28px; height: 28px;
  border: 1.5px solid var(--edge-strong); pointer-events: none;
  opacity: 0; transform: scale(1.12);
  animation: lock 1100ms cubic-bezier(.2,.8,.2,1) 250ms forwards;
}
.photo::before { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; transform-origin: bottom right; }
.photo::after  { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; transform-origin: bottom left; }
.photo .b1     { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; transform-origin: top right; }
.photo .b2     { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; transform-origin: top left; }
@keyframes lock {
  0%   { opacity: 0; transform: scale(1.12); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .photo::before, .photo::after, .photo .b1, .photo .b2 { opacity: 1; transform: none; }
}
@media (min-width: 900px) {
  .hero-ev.with-photo .photo { position: sticky; top: calc(var(--nav-h) + 24px); }
}
@media (max-width: 899px) {
  .hero-ev .photo { max-width: 420px; }
  .hero-ev .photo img { aspect-ratio: 1 / 1; object-position: 50% 30%; }
}

/* sections */
.ev .section { padding: 56px 0; border-top: 1px solid var(--edge); }
.ev .section h2 { margin-bottom: 14px; max-width: 26ch; }
.ev .section h3 { margin: 0 0 8px; font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.3; }
.prose { max-width: 66ch; }
.prose p, .card-ev p { margin: 0 0 14px; color: var(--body); font-size: 1.02rem; line-height: 1.62; text-wrap: pretty; }
.prose p:last-child, .card-ev p:last-child { margin-bottom: 0; }
.more { margin: 22px 0 0; font-weight: 500; }
.more a { display: inline-flex; align-items: center; min-height: 44px; }

.grid-3, .grid-2 { display: grid; gap: 14px; margin-top: 24px; }
@media (min-width: 760px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.card-ev {
  padding: 22px 22px 24px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(255,255,255,0.065), rgba(255,255,255,0.02));
  border: 1px solid var(--edge);
}
.card-ev p { font-size: 0.98rem; }
.card-ev p.card-more { margin: 0 0 -8px; font-weight: 500; }
.card-ev .card-more a { display: inline-flex; align-items: center; min-height: 44px; }

/* guest-count table: a table on wide screens, one card per row on phones */
.sizes { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 0.98rem; }
.sizes th, .sizes td { padding: 14px 14px 14px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--edge); }
.sizes thead th { color: var(--muted); font-weight: 500; font-size: 0.9rem; }
.sizes tbody th { font-weight: 600; color: var(--paper); }
.sizes td { color: var(--body); }
@media (max-width: 640px) {
  .sizes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sizes, .sizes tbody, .sizes tr, .sizes th, .sizes td { display: block; width: 100%; }
  .sizes tr { padding: 14px 0; border-bottom: 1px solid var(--edge); }
  .sizes th, .sizes td { border: 0; padding: 3px 0; }
  .sizes tbody th { font-size: 1.05rem; padding-bottom: 6px; }
  .sizes td { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 12px; }
  .sizes td::before { content: attr(data-label); color: var(--muted); }
}

.who { display: grid; gap: 32px; align-items: start; }
@media (min-width: 820px) { .who { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; } }
.who .photo { max-width: 340px; }

.closer-ev { text-align: left; }
.closer-ev .actions { margin-top: 18px; }

/* ---- packages ---- */
.ev .section .plan h2 { margin: 0; max-width: none; font-weight: 500; font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1.2; }
/* the studio pages style every direct <p> of a section; these event-page
   paragraphs keep their own spacing and width */
.ev .section > .more { margin: 18px 0 0; max-width: none; color: inherit; font-size: 1rem; }
.ev .section > .beyond { margin: 14px 0 0; max-width: none; color: var(--body); }
.ev .section > .quiet { margin: 16px 0 0; max-width: none; font-size: 0.95rem; }
.plan .guests { margin: 0; color: var(--muted); font-size: 0.98rem; }
.beyond {
  margin: 14px 0 0; padding: 18px 22px; border-radius: 18px; border: 1px dashed var(--edge-strong);
  color: var(--body); font-size: 1rem;
}
.beyond b { color: var(--paper); font-weight: 600; }
.ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; max-width: 66ch; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--body); line-height: 1.5; }
.ticks li::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 4px; border-radius: 50%; background: rgba(155, 231, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(155, 231, 255, 0.35); }
.ticks b { color: var(--paper); font-weight: 600; }
.rates { margin: 20px 0 0; display: grid; gap: 10px; max-width: 520px; }
.rates > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--edge); }
.rates dt { color: var(--body); }
.rates dd { margin: 0; color: var(--paper); font-weight: 600; white-space: nowrap; }

/* ---- /book form ---- */
.inquiry {
  width: min(760px, 100%); margin-top: 8px;
  padding: clamp(20px, 5vw, 36px);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border: 1px solid var(--edge);
  display: grid; gap: 22px;
}
.inquiry[hidden] { display: none; }
.req-note { margin: 0; color: var(--muted); font-size: 0.92rem; }
.field { display: grid; gap: 8px; min-width: 0; align-content: start; }
.field[hidden] { display: none; }
.field > label, .field > .label { font-weight: 600; font-size: 1rem; color: var(--paper); }
.opt-tag { font-weight: 400; color: var(--muted); font-size: 0.9rem; margin-left: 6px; }
.field input:not([type="checkbox"]), .field select, .field textarea {
  width: 100%; min-height: 48px; margin: 0;
  font: inherit; font-size: 16px; color: var(--paper);
  background: rgba(12, 12, 12, 0.7); border: 1px solid var(--edge-strong); border-radius: 12px;
  padding: 11px 14px;
  transition: border-color 160ms ease;
}
.field textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C958A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.field select option { background: #111; color: var(--paper); }
.field input:disabled { opacity: 0.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--prism-a); outline-offset: 2px; border-color: transparent; }
.field [aria-invalid="true"] { border-color: var(--warn); }
.field .hint { margin: 0; color: var(--muted); font-size: 0.92rem; }
.field .hint a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--edge-strong); text-underline-offset: 3px; }
.field .err { margin: 0; color: var(--warn); font-size: 0.92rem; }
.field .err:empty { display: none; }
.two { display: grid; gap: 22px; align-items: start; }
@media (min-width: 640px) { .two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; color: var(--body); }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--prism-a); }
.inquiry .send { display: grid; gap: 12px; padding-top: 6px; }
.inquiry .send .cta { justify-self: start; }
.form-foot { margin: 0; color: var(--muted); font-size: 0.92rem; }
.form-status { margin: 0; color: var(--body); font-size: 0.98rem; }
/* Empty, the status line is visually hidden but stays rendered, so screen
   readers announce text added to it later (display: none would drop the
   live region from the accessibility tree). */
.form-status:empty {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.form-status.bad { color: var(--warn); }
.form-status a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.sent {
  width: min(760px, 100%); padding: clamp(22px, 5vw, 36px); border-radius: 24px;
  background: rgba(155, 231, 255, 0.07); border: 1px solid rgba(155, 231, 255, 0.24);
}
.sent[hidden] { display: none; }
.sent h2 { margin: 0 0 8px; font-weight: 500; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.02em; }
.sent h2:focus { outline: none; }
.sent p { margin: 0; color: var(--body); }
.nexts { list-style: none; margin: 20px 0 0; padding: 0; counter-reset: n; display: grid; gap: 14px; }
@media (min-width: 760px) { .nexts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nexts li { counter-increment: n; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--edge); background: rgba(255,255,255,0.03); color: var(--body); line-height: 1.55; }
.nexts li::before { content: counter(n); display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 12px; border-radius: 50%; border: 1px solid var(--edge-strong); color: var(--paper); font-weight: 600; font-size: 0.95rem; }
.nexts b { display: block; color: var(--paper); font-weight: 600; margin-bottom: 4px; }

/* ---- footer (identical on every page but the survey) ---- */
footer {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  padding: 12px var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px));
  font-family: var(--label); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
}
footer a:hover { color: var(--paper); }
footer.site-foot {
  position: relative; z-index: 2; display: block;
  width: min(1040px, calc(100% - 2 * var(--gutter))); margin: 32px auto 0;
  padding: 40px 0 calc(40px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--edge);
  font-family: var(--sans); font-size: 0.95rem; letter-spacing: 0; text-transform: none; color: var(--muted);
}
.foot-cols { display: grid; gap: 24px 28px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.foot-h { margin: 0 0 6px; color: var(--paper); font-weight: 600; font-size: 0.95rem; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; }
.foot-cols a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }
.foot-cols a:hover, .foot-contact a:hover { color: var(--paper); }
.foot-contact { margin: 28px 0 0; color: var(--muted); }
.foot-contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); }
.foot-legal { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; }

/* ---- studio pages (/studios) ---- */
.page { padding: calc(120px + env(safe-area-inset-top, 0px)) var(--gutter) 24px; }
.page-head {
  max-width: 820px; margin: 0 auto 56px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.page-head .sub { max-width: 44ch; }

/* ---- SelfSearch AI mark ---- */
/* The viewfinder-face icon (same paths as FaceIcon in the gallery app), the
   name in Manrope, and AI in an outlined chip. Sized in em and drawn in
   currentColor, so it takes the size and color of the text around it. */
.selfsearch {
  display: inline-flex; align-items: baseline; gap: 0.36em;
  font-family: var(--sans); font-weight: inherit; letter-spacing: -0.01em; text-transform: none; white-space: nowrap;
}
.selfsearch svg { width: 1em; height: 1em; flex: 0 0 auto; transform: translateY(0.16em); }
.selfsearch .ai {
  font-family: var(--label); font-size: max(0.68em, 12px); font-weight: 500; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.3em 0.36em 0.26em 0.5em; border: 1px solid color-mix(in srgb, currentColor 55%, transparent); border-radius: 0.5em;
  transform: translateY(-0.12em);
}

.section { width: min(960px, 100%); margin: 0 auto; padding: 40px 0; }
.section h2 {
  margin: 0 0 8px; font-weight: 500; letter-spacing: -0.025em; text-wrap: balance;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.12;
}
.section > p { margin: 0 0 28px; color: var(--muted); max-width: 56ch; font-size: 1.02rem; }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.feature {
  padding: 22px 22px 24px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border: 1px solid var(--edge);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.feature b { display: block; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.01em; }
.feature p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.feature code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85em; color: var(--paper); background: var(--glass-strong); padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--edge); }
.step { padding: 22px 22px 8px 0; border-left: 1px solid var(--edge); padding-left: 22px; }
.step:first-child { border-left: 0; padding-left: 0; }
.step i { display: block; font-style: normal; font-family: var(--label); font-size: 12px; letter-spacing: 0.2em; color: var(--dim); margin-bottom: 10px; }
.step b { display: block; font-weight: 600; margin-bottom: 6px; }
.step p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.faq { border-top: 1px solid var(--edge); }
.faq details { border-bottom: 1px solid var(--edge); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 0; min-height: 44px; font-weight: 500; letter-spacing: -0.01em;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq summary:focus-visible { border-radius: 6px; }
.faq details p { margin: 0 0 20px; color: var(--muted); max-width: 64ch; line-height: 1.55; }
.ev .faq details p { color: var(--body); }
.faq a { color: var(--paper); border-bottom: 1px solid var(--edge-strong); }
.closer { text-align: center; padding: 56px 0 24px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.closer h2 { margin: 0; font-weight: 500; letter-spacing: -0.03em; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.08; }
.ev .closer.closer-ev { align-items: flex-start; text-align: left; }
@media (max-width: 760px) {
  .features { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step { border-left: 0; padding-left: 0; border-top: 1px solid var(--edge); padding-top: 18px; }
  .step:first-child { border-top: 0; }
}
@media (max-width: 520px) {
  .features { grid-template-columns: 1fr; }
}

/* ---- sign-off (studio pages) ---- */
.signoff {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 96px var(--gutter) 40px; text-align: center;
}
.stacked { width: min(220px, 60vw); height: auto; color: var(--paper); opacity: 0.92; }
.signoff p { margin: 0; color: var(--muted); font-size: 0.95rem; max-width: 36ch; text-wrap: balance; }

/* ---- studio pricing ---- */
.billing {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px;
  border-radius: 999px; background: rgba(12, 12, 12, 0.62); border: 1px solid var(--edge);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.billing button {
  font: inherit; font-family: var(--label); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); background: transparent; border: 0; cursor: pointer; min-height: 44px;
  padding: 9px 16px; border-radius: 999px; transition: color 200ms ease, background-color 200ms ease;
}
.billing button[aria-pressed="true"] { color: var(--ink); background: var(--paper); }
.billing button:focus-visible { outline: 2px solid var(--prism-a); outline-offset: 2px; }
.billing .save { font-family: var(--label); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--prism-a); margin-left: 4px; }
.billing button[aria-pressed="true"] .save { color: #1B5C70; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 18px;
  padding: 26px 24px 28px; border-radius: 24px;
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border: 1px solid var(--edge);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.plan.featured { border-color: rgba(155, 231, 255, 0.35); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(155, 231, 255, 0.12) inset; }
.plan .tag {
  position: absolute; top: -11px; left: 24px;
  font-family: var(--label); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); background: var(--prism-a); padding: 4px 10px; border-radius: 6px;
}
.plan h3 { margin: 0; font-weight: 500; font-size: 1.35rem; letter-spacing: -0.02em; }
.plan .price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan .price b { font-weight: 500; font-size: 2.6rem; letter-spacing: -0.04em; line-height: 1; }
.plan .price span { color: var(--muted); font-size: 0.95rem; }
.plan .price small { flex-basis: 100%; color: var(--muted); font-size: 0.85rem; margin-top: 4px; min-height: 1.3em; }
.plan .lead { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.5; min-height: 3em; }
.plan .cta { width: 100%; padding: 14px 20px; }
.plan .cta.link { width: 100%; }
.plan ul { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--edge); display: flex; flex-direction: column; gap: 10px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; line-height: 1.45; color: var(--paper); }
.plan li::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; background: rgba(155, 231, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(155, 231, 255, 0.35); }
.plan li.head { color: var(--muted); font-family: var(--label); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 6px; }
.plan li.head::before { display: none; }
.plan li.soft { color: var(--muted); }
.plan li.soft::before { background: transparent; box-shadow: inset 0 0 0 1px var(--edge-strong); }
.trial { margin: 0; text-align: center; color: var(--muted); font-size: 0.92rem; }

.compare { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.compare th, .compare td { padding: 14px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--edge); }
.compare th { font-family: var(--label); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.compare th.plan-col, .compare td.plan-col { text-align: center; }
.compare th.plan-col { color: var(--paper); font-size: 12px; }
.compare th.featured, .compare td.featured { background: rgba(155, 231, 255, 0.05); }
.compare td:first-child { color: var(--paper); }
.compare td .sub { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 2px; }
.compare td.plan-col { color: var(--muted); }
.compare .yes { color: var(--prism-a); font-size: 1.05rem; }
.compare .no { color: var(--muted); }
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
@media (max-width: 860px) {
  .plans { grid-template-columns: 1fr; }
  .plan .lead { min-height: 0; }
  .compare { min-width: 640px; }
}

/* ---- survey (unlisted /survey/* pages) ---- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--label); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--prism-a);
  padding: 6px 12px; border-radius: 6px;
  background: rgba(155, 231, 255, 0.10); border: 1px solid rgba(155, 231, 255, 0.18);
}
.chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--prism-a); box-shadow: 0 0 10px var(--prism-a); }
.survey {
  width: min(640px, 100%); margin: 0 auto;
  padding: clamp(22px, 5vw, 40px);
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03));
  border: 1px solid var(--edge);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column; gap: 34px;
}
.survey[hidden] { display: none; }
.survey fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.survey legend {
  padding: 0; margin-bottom: 14px;
  font-weight: 500; font-size: 1.12rem; line-height: 1.38; letter-spacing: -0.01em; text-wrap: pretty;
}
.survey legend i {
  display: block; margin-bottom: 8px; font-style: normal;
  font-family: var(--label); font-size: 12px; letter-spacing: 0.18em; color: var(--dim);
}
.survey .hint { margin: -6px 0 2px; color: var(--muted); font-size: 0.9rem; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.opt span {
  display: flex; align-items: center; gap: 12px; min-height: 52px; height: 100%;
  padding: 12px 16px; border-radius: 14px;
  background: rgba(12, 12, 12, 0.5); border: 1px solid var(--edge);
  color: var(--paper); font-size: 1rem; line-height: 1.3;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.opt span::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--edge-strong);
  transition: box-shadow 160ms ease, background-color 160ms ease;
}
.opt input[type="checkbox"] + span::before { border-radius: 5px; }
.opt:hover span { background: var(--glass-strong); }
.opt input:checked + span { border-color: rgba(155, 231, 255, 0.45); background: rgba(155, 231, 255, 0.09); }
.opt input[type="radio"]:checked + span::before { background: var(--prism-a); box-shadow: inset 0 0 0 4px #10161A, 0 0 0 1.5px var(--prism-a); }
.opt input[type="checkbox"]:checked + span::before {
  background: var(--prism-a) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050505' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / 14px no-repeat;
  box-shadow: none;
}
.opt input:focus-visible + span { outline: 2px solid var(--prism-a); outline-offset: 3px; }
.survey .need { display: none; margin: 0; color: var(--warn); font-size: 0.9rem; }
.survey fieldset.missing .need { display: block; }
.survey fieldset.missing .opt span { border-color: rgba(255, 180, 163, 0.4); }
.survey .send { display: flex; flex-direction: column; gap: 12px; padding-top: 26px; border-top: 1px solid var(--edge); }
.survey .send .cta { width: 100%; }
.survey .note { text-align: center; text-shadow: none; }
.survey.finished { align-items: center; text-align: center; gap: 16px; }
.survey.finished h2 { margin: 0; font-weight: 500; letter-spacing: -0.03em; font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.1; }
.survey.finished h2:focus { outline: none; }
.survey.finished p { margin: 0 0 8px; color: var(--muted); max-width: 40ch; text-wrap: balance; }
.survey .tick {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  color: var(--prism-a); background: rgba(155, 231, 255, 0.10); border: 1px solid rgba(155, 231, 255, 0.22);
}
.survey .tick svg { width: 24px; height: 24px; }
.survey .again {
  margin-top: 4px; padding: 6px 10px; min-height: 44px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: inherit; font-size: 0.9rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.survey .again:hover { color: var(--paper); }
.survey .again[hidden] { display: none; }
.credit { margin: 28px auto 8px; text-align: center; font-size: 0.85rem; color: var(--muted); }