@font-face {
    font-family: 'Pretendard Variable';
    src: url('assets/fonts/Pretendard.subset.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Geist';
    src: url('assets/fonts/Geist.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'PP Neue Montreal';
    src: url('assets/fonts/otf/PPNeueMontreal-Hairline.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'PP Neue Montreal';
    src: url('assets/fonts/otf/PPNeueMontreal-Light.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'PP Neue Montreal';
    src: url('assets/fonts/otf/PPNeueMontreal-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'PP Neue Montreal';
    src: url('assets/fonts/otf/PPNeueMontreal-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'PP Neue Montreal';
    src: url('assets/fonts/otf/PPNeueMontreal-Extrabold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  img, a { -webkit-user-drag: none; user-drag: none; }
  * { -webkit-user-select: none; user-select: none; }
  :root {
    --bg: #ffffff;
    --text: #252830;
    --muted: #93959c;
    --surface: #f4f4f4;
    --surface2: #2a2a2a;
    --border: rgba(0,0,0,0.03);
    --error: #ff2d2d;
    --frame-radius: 26px;
    --frame-gap: 4rem;
    --screen-row-gap: 1.25rem;   /* shared gap for rows of screenshots (flow steps, card states) */
    --hero-top: 3.5rem;
    --metric-color: hsl(330, 90%, 70%);
    --sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
    --display: 'PP Neue Montreal', 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --max: 1180px;
    --pad: 4rem;
    --body-size: 1.0625rem;
    /* type scale — body uses --body-size */
    --t-title: clamp(1.875rem, 4vw, 2.75rem);
    --t-sub: clamp(1.25rem, 2vw, 1.5rem);
    --t-small: 0.9375rem;
    --t-label: 0.8125rem;
  }
  html { font-size: 15px; }
  @media (min-width: 1500px) {
    :root { --max: 1240px; }
  }
  @media (max-width: 600px) {
    :root { --pad: 1.25rem; }   /* mobile: stop the huge side padding squeezing content */
  }
  body { font-family: var(--sans); background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; transition: background-color 0.4s ease, color 0.4s ease; font-size: var(--body-size); line-height: 1.5; font-weight: 400; letter-spacing: 0.01em; word-break: keep-all; overflow-wrap: break-word; }

  /* Theme transition — applies uniformly to every element using theme vars */
  body, body *, body *::before, body *::after {
    transition-property: background-color, color, border-color, outline-color, fill, filter;
    transition-duration: 0.4s;
    transition-timing-function: ease;
  }

  /* PAGE TRANSITIONS */
  .page { transition: opacity 0.25s ease; }
  .page.fade-out { opacity: 0; pointer-events: none; }

  /* PROJECT PREV/NEXT NAV */
              /* NAV GRADIENT */
  #nav-grad { display: none; }

  /* NAV */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: transparent;
  }
  /* Mobile: auto-hide the nav on scroll-down, reveal on scroll-up */
  @media (max-width: 600px) {
    nav { transition: transform 0.3s ease; }
    nav.nav-hidden { transform: translateY(-100%); }
  }

  .nav-inner {
    max-width: var(--max); margin: 0 auto;
    padding: 1.5rem var(--pad) 1rem;
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 101;
  }
  .nav-cta a {
    background: var(--text);
    color: var(--bg) !important;
    opacity: 1 !important;
    transition: opacity 0.15s, background-color 0.4s ease, color 0.4s ease;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding-right: 1rem;
  }
  .cta-icon { flex-shrink: 0; }
  .nav-cta a:hover { opacity: 0.85 !important; }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    list-style: none;
    background: color-mix(in srgb, var(--text) 3%, color-mix(in srgb, var(--bg) 70%, transparent));
    border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
    border-radius: 999px;
    padding: 8px 8px 8px 16px;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    transition: background-color 0.4s ease, border-color 0.4s ease;
  }
  .nav-mid {
    display: flex;
    gap: 0;
  }
  body:not(.in-case) .nav-mid-case { display: none; }
  .nav-mid-case a { padding-left: calc(0.875rem - 8px); }   /* tighter left on "Go back to home" */
  body.in-case .nav-mid-home,
  body.in-case .nav-cta { display: none; }
  .nav-links a {
    font-size: var(--t-small);
    color: var(--text);
    opacity: 0.7;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s, background-color 0.4s ease, color 0.4s ease;
    padding: 0.625rem 0.875rem;
    display: inline-block;
    font-weight: 400;
    border-radius: 999px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .nav-links a:hover { opacity: 1; }
  .nav-links a:active { opacity: 0.55; }
  .nav-links a.active {
    color: var(--text);
    opacity: 1;
  }

  .page { display: none; min-height: 100vh; padding-top: 80px; }
  .page.active { display: block; }

  /* 공통 레이아웃 wrapper */
  
  /* HERO */
  .home-hero { max-width: var(--max); margin: 0 auto; padding: var(--hero-top) calc(var(--pad) + 0.5rem) 1.75rem; text-align: center; }
  .home-hero .hero-sub { align-items: center; }
  /* H1 family — hero / cs / pw-gate share style, hero has fixed size */
  .hero-title,
  .cs-title,
  .pw-gate-title {
    font-family: var(--display);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--text);
  }
  .cs-title,
  .pw-gate-title {
    font-size: clamp(2.125rem, 5.5vw, 3.5rem);
    margin-bottom: 1rem;
  }
  .hero-title {
    font-size: clamp(2.375rem, 7vw, 4.625rem);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
  .hero-sub { display: flex; flex-direction: column; gap: 0.05rem; margin-top: clamp(1.25rem, 2.5vw, 2.25rem); }
  .hero-sub-line { color: color-mix(in srgb, var(--text) 65%, var(--muted)); line-height: 1.6; }
  .hero-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: opacity 0.2s ease; }
  .hero-link:hover { opacity: 0.6; }

  /* WORK */
  .work-section { max-width: var(--max); margin: 0 auto; padding: 1.5rem var(--pad) 0; }
  .section-eyebrow { font-size: 0.8125rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; line-height: 1.4; margin-bottom: 1.5rem; }
  /* Swiss-style footer — structured row, flush left/right, uppercase tracked labels */
  .site-footer-mark {
    font-family: var(--sans);
    max-width: var(--max);
    margin: 0 auto;
    padding: 1.5rem var(--pad) 2.75rem;
    text-align: center;
  }
  .footer-row {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.55rem;
  }
  .footer-links, .footer-meta { display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: wrap; }
  .footer-links > * + *::before, .footer-meta > * + *::before { content: '·'; margin: 0 0.275rem; }   /* symmetric spacing — halved */
  .footer-link, .footer-meta {
    margin: 0;
    font-size: 0.72rem; font-weight: 500; line-height: 1.4;
    letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--muted);
  }
  .footer-link {
    background: none; border: none; padding: 0;
    text-decoration: none; transition: color 0.2s ease;
  }
  .footer-link:hover { color: var(--text); }
  .footer-link.copied { color: var(--text); }
  .footer-email { display: inline-flex; align-items: center; gap: 0.3rem; }
  .footer-email .chat-copy-check { width: 1em; height: 1em; }   /* match the footer text size */
  .work-grid { columns: 2; column-gap: 1rem; column-fill: balance; }
  @media (max-width: 900px) {
    .work-grid { columns: 1; }
  }

  .work-card { background: var(--surface); border: none; outline: 1px solid var(--border); outline-offset: -1px; cursor: pointer; text-decoration: none; color: inherit; display: inline-block; width: 100%; break-inside: avoid; margin-bottom: 1rem; padding: 10px; border-radius: 22px; transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), background-color 0.4s ease; overflow: visible; box-sizing: border-box; }
  .work-card:hover { transform: scale(0.985); transform-origin: center; }
  .work-card:hover .card-thumb { opacity: 1; }
  .card-thumb { transition: opacity 0.2s ease, background-color 0.4s ease, outline-color 0.4s ease; }
  .work-card:hover .card-thumb-inner { transform: scale(1); }

  .card-thumb { width: 100%; aspect-ratio: 1 / 1.1; background: color-mix(in srgb, var(--surface) 92%, black); overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 14px; position: relative; }
      .card-thumb-auto { aspect-ratio: auto; height: auto; }
  .card-thumb-auto .card-thumb-inner { height: auto; }
  .card-thumb-auto img { width: 100%; height: auto !important; object-fit: contain !important; }
  /* Swipe thumb — same shape as Event, video fills entire card */
  .card-thumb-swipe { aspect-ratio: 1 / 1.17; overflow: hidden; }   /* ~90% of the original height */
  .card-thumb-swipe .swipe-video { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Prometheus thumb — reuses the event card layout (card-thumb-event); only the gradient differs (override below) */

  /* Event thumb — dark base + slow rotating gradient + green light-up on hover */
  .card-thumb-event {
    aspect-ratio: 1 / 1.17;   /* ~90% of the original height */
    background: #2a2a2a;
    overflow: hidden;
  }
  .card-thumb-event::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, #383838, #161616);   /* static 45deg: dark top, slightly less-bright bottom */
    z-index: 0;
    pointer-events: none;
  }
  .card-thumb-event .card-thumb-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .card-thumb-event .event-overlay {
    width: 52%;
    height: auto;
    max-height: 76%;
    object-fit: contain;
    display: block;
    border-radius: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .work-card:hover .card-thumb-event .event-overlay {
    transform: scale(1.04);
  }
  /* Prometheus uses the event card layout but with a plain background — no rotating gradient.
     Match the system cool-gray base the other thumbs use (event's #2a2a2a reads too warm once the gradient is gone). */
  .card-thumb-consent { background: color-mix(in srgb, var(--bg) 50%, var(--surface)); }   /* lighter than the page so the card lifts; card-thumb-auto fits width with no crop */
  .card-thumb-consent::before { display: none; }
  /* Mobile: scale the thumbnail up (crop the outer phones) so it reads bolder */
  @media (max-width: 600px) {
    .card-thumb-consent { aspect-ratio: 5 / 4; height: auto; }
    .card-thumb-consent .card-thumb-inner { height: 100%; }
    .card-thumb-consent img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  }
  .card-lock-badge { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; background: var(--surface); color: var(--text); border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2; }
  .card-thumb-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1); }
  .card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  
  .card-body { padding: 1rem 0.625rem 0.75rem; }
  .card-title {
    font-family: var(--sans);
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.005em;
    line-height: 1.4;
    margin: 0;
  }
      .card-metrics {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0.375rem 0 0;
  }
  .card-meta-line {
    font-family: var(--sans);
    font-size: 0.9375rem;
    line-height: 1.4;
    color: color-mix(in srgb, var(--text) 80%, var(--muted));
    letter-spacing: 0;
    font-weight: 400;
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    width: fit-content;
  }
  .metric-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg);
    color: var(--text);
    padding: 3px 6px;
    border-radius: 4px;
    font-weight: 400;
    line-height: 1.2;
    font-size: 0.875rem;
  }
  .metric-tag .metric-icon { width: 14px; height: 14px; }
  .metric-tag strong { font-weight: 500; }
  .metric-tag { position: relative; top: 2px; }
  .card-meta-line .metric-icon {
    flex-shrink: 0;
    color: var(--text);
  }
  .card-meta-line strong {
    font-weight: 500;
    color: var(--text);
  }
  .card-meta-line .metric-desc {
    font-weight: 400;
    color: inherit;
  }
  .card-meta-line .metric-arrow { display: inline-block; transform: scaleX(0.7); margin: 0; }
    .card-read-time {
    font-family: var(--sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0.75rem 0 0;
    opacity: 0.9;
  }

  /* SITE FOOTER */
    html { scroll-behavior: smooth; }
  
  /* Dev toggles — hidden corner buttons for language/theme. Visible on hover. */
  #dev-toggles {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    gap: 4px;
    opacity: 0.06;
    transition: opacity 0.2s;
  }
  #dev-toggles:hover { opacity: 0.85; }
  #dev-toggles button {
    background: none;
    border: none;
    padding: 6px 8px;
    font-size: var(--t-label);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--text);
    cursor: pointer;
    font-family: var(--sans);
  }
  #dev-toggles #dark-btn { font-size: var(--t-small); font-weight: 400; }

  /* BACK BUTTON */
  .cs-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--body-size);
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    margin-bottom: 1.75rem;
    transition: opacity 0.15s;
    letter-spacing: 0.01em;
    background: none;
    border: none;
    padding: 0.5rem 0;
    font-family: var(--sans);
  }

  /* CASE STUDY HERO IMAGE — below meta, contained within max-width */
  .cs-hero {
    width: 100%;
    height: clamp(240px, 28vw, 360px);
    border-radius: var(--frame-radius);
    background: var(--surface);
    overflow: hidden;
    margin: 2rem 0 1.5rem;
    outline: 1px solid var(--border);
    outline-offset: -1px;
    position: relative;
  }
  /* loading skeleton — a soft shimmer fills the header frame until the image loads, then fades out */
  @keyframes cs-skeleton-sweep { 0% { background-position: 150% 0; } 100% { background-position: -150% 0; } }
  .cs-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(100deg, var(--surface) 35%, color-mix(in srgb, var(--surface) 86%, white) 50%, var(--surface) 65%);
    background-size: 220% 100%;
    animation: cs-skeleton-sweep 1.5s ease-in-out infinite;
    transition: opacity 0.5s ease;
  }
  .cs-hero.is-loaded::after { opacity: 0; }
  .cs-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Hero lineup — a straight, evenly-spaced row of phone shots (no tilt, no overlap) */
          /* Full hero — show the whole image, fit to width, never cropped */
  .cs-hero-full { height: auto; }
  .cs-hero-full img { width: 100%; height: auto; object-fit: contain; display: block; }
  .cs-back-btn:hover { opacity: 0.5; }
  .cs-next-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--body-size);
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    margin-bottom: 1.75rem;
    transition: opacity 0.15s;
    letter-spacing: 0.01em;
    background: none;
    border: none;
    padding: 0.5rem 0;
    font-family: var(--sans);
    text-align: right;
    max-width: 60%;
  }
  .cs-next-btn:hover { opacity: 0.5; }
  .cs-next-btn-title { color: inherit; font-weight: 500; }
  .cs-next-btn-lock { color: inherit; flex-shrink: 0; }

  /* Bottom back wrapper — replaces prev/next nav at case study end */
  .cs-bottom-back {
    max-width: var(--max);
    margin: 3.5rem auto 0;
    padding: 0 var(--pad);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }
  /* Inside cs-body — strip horizontal padding (parent already has it) */
  .cs-body .cs-bottom-back { padding: 0; }

  /* CASE STUDY */
  .cs-header { max-width: var(--max); margin: 0 auto; padding: var(--hero-top) calc(var(--pad) + 0.5rem) 2rem; }
  .cs-meta { display: flex; gap: 1rem 3.5rem; margin-top: 2rem; margin-bottom: 0; flex-wrap: wrap; padding-bottom: 0; border: none; }
  .cs-meta-item span { display: block; font-size: var(--body-size); color: var(--text); text-transform: none; margin-top: 0.625rem; letter-spacing: 0; font-weight: 400; line-height: 2.2; }
  .cs-hook {
    font-family: var(--display);
    font-size: var(--t-sub);
    font-weight: 600;   /* semibold — keep the hook bold (title 800 > hook 600 > body 400) */
    line-height: 1.35;
    color: var(--text);
    letter-spacing: 0;
    margin: 3rem 0 0;
  }
  
  .cs-body { max-width: var(--max); margin: 0 auto; padding: 2rem calc(var(--pad) + 0.5rem) 0; overflow-x: hidden; }
  .cs-section { margin-bottom: var(--frame-gap); }
  /* Eyebrow family — shared for cs-section-label, cs-meta-item, pw-back-hint */
  .cs-section-label,
  .cs-meta-item {
    font-family: var(--sans);
    font-size: var(--t-label);
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.4;
    color: var(--muted);
    text-transform: uppercase;
  }
  .cs-section-label { margin-bottom: 1.5rem; margin-top: 0; }
  .cs-meta-item { padding-right: 0; }
  .cs-section > p:not(.cs-section-label) { font-size: var(--body-size); line-height: 1.55; color: var(--text); margin-bottom: 1rem; font-weight: 400; letter-spacing: 0.01em; }
  .cs-section > p:not(.cs-section-label) em { font-style: italic; font-weight: 400; color: color-mix(in srgb, var(--text) 65%, var(--muted)); }
  .cs-section > p:not(.cs-section-label):last-child { margin-bottom: 0; }
  .cs-section :where(.dual-frame, .cs-intent-frame, .goal-list, .flowchart-img, .summary-stats, .outcome-stats, .outcome-stats-2, .cs-flow-steps) + :where(p, .cs-subsection-label, .cs-callout) {
    margin-top: 1.75rem;
  }

  /* Summary stat boxes — same look as work-card thumbnails */
  .summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
  }
  /* icon + metric on the first row, description on its own line below */
  .summary-box {
    background: var(--surface);
    border-radius: var(--frame-radius);
    outline: 1px solid var(--border);
    outline-offset: -1px;
    padding: 2rem;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.6rem;
    transition: background-color 0.4s ease, outline-color 0.4s ease;
  }
  .summary-icon {
    grid-column: 1; grid-row: 1;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .summary-icon img,
  .summary-icon svg { width: 100%; height: 100%; display: block; }
  .summary-headline {
    grid-column: 2; grid-row: 1;
    font-family: var(--display);
    font-size: var(--t-title);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text);
    margin: 0;
  }
  .summary-detail {
    grid-column: 1 / -1; grid-row: 2;
    font-size: var(--body-size);
    color: color-mix(in srgb, var(--text) 65%, var(--muted));
    margin: 0;
    line-height: 1.5;
  }
  /* TEMP: outcome icons hidden — collapse to one column so the number sits flush left. Delete this block to bring icons back. */
  .summary-icon { display: none; }
  .summary-box { grid-template-columns: 1fr; }
  .summary-headline { grid-column: 1; grid-row: 1; }
  .summary-detail { grid-column: 1; grid-row: 2; }

  /* Four card states — one row on desktop, 2x2 on mobile */
  /* Swipe case — four relationship card states. 4-up on desktop, 2×2 on small screens. */
  .card-states {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 300px));
    gap: 0;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
  }
  .card-states img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
  }
  @media (max-width: 768px) {
    .card-states { grid-template-columns: repeat(2, minmax(0, 300px)); }
  }

  /* Final Output — frame wraps the stage + annotations */
  .cs-intent-frame {
    background: var(--surface);
    border-radius: var(--frame-radius);
    outline: 1px solid var(--border);
    outline-offset: -1px;
    padding-block: 4rem;   /* one source of vertical breathing for every frame */
    padding-inline: 4rem;
    margin-top: 1.5rem;
    transition: background-color 0.4s ease, outline-color 0.4s ease;
  }
  @media (max-width: 600px) {
    .cs-intent-frame {
      background: var(--surface);
      outline: 1px solid var(--border);
      outline-offset: -1px;
      padding-block: 2rem;   /* mobile: uniform vertical breathing */
      padding-inline: 1.25rem;
    }
    .cs-intent-frame.cs-media-frame { padding-inline: 1.5rem; }
  }
  .cs-intent {
    position: relative;
    display: flex;
    align-items: start;
    zoom: 0.9;   /* scale the whole UI Details block (image + annotations + text) to 90% */
    --stage-w: 360px;
    --stage-left: max(0px, calc((100% - var(--stage-w)) * 0.4));
  }
  .cs-intent-stage {
    position: relative;
    width: var(--stage-w);
    max-width: 100%;
    margin-left: var(--stage-left);
  }
  .cs-intent-image-wrap {
    position: relative;
    display: block;
    width: 100%;
  }
  .cs-intent-image,
  .cs-intent-image-fold {
    display: block;
    width: 100%;
    border-radius: var(--frame-radius);
  }
  .cs-intent-image {
    --reveal: 0.1;
    opacity: var(--reveal);
    transition: opacity 0.2s ease;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.25));   /* follows the image alpha; only the base, not the fold copy */
  }
  .cs-intent-image-fold {
    position: absolute;
    top: 0;
    left: 0;
    clip-path: inset(0 0 58% 0 round var(--frame-radius));
  }
  .cs-intent-annotations {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: calc(50% + 220px + 1.75rem);
    pointer-events: none;
  }
  .cs-intent-annotations.cs-intent-side-right {
    left: calc(var(--stage-left) + var(--stage-w) + 1.75rem);
    right: 0;
  }
  .cs-intent-item {
    position: absolute;
    right: 0;
    text-align: right;
    padding-right: 1.25rem;
    border-right: 2px solid var(--text);
    max-width: 300px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0.2;
    transition: opacity 0.4s ease;
  }
  .cs-intent-item.active { opacity: 1; }
  .cs-intent-side-right .cs-intent-item {
    right: auto;
    left: 0;
    text-align: left;
    padding-right: 0;
    padding-left: 1.25rem;
    border-right: none;
    border-left: 2px solid var(--text);
  }
  .cs-intent-title {
    /* same text style as the case hook (.cs-hook) */
    font-family: var(--display);
    font-size: var(--t-sub);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.35;
    color: var(--text);
    margin: 0 0 0.35rem;
  }
  .cs-intent-desc {
    font-family: var(--sans);
    font-size: var(--body-size);
    line-height: 1.6;
    color: var(--text);
    margin: 0;
  }

  /* Mobile numbered markers + popup — hidden on desktop */
  .cs-intent-marker {
    display: none;
    position: absolute;
    left: auto;
    right: 0;
    transform: translate(50%, -50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--text);
    color: var(--bg);
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-size: var(--t-label);
    font-weight: 500;
    cursor: pointer;
    border: none;
    padding: 0;
    z-index: 5;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  }
  .cs-intent-marker::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  .cs-intent-popup {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    right: auto;
    margin-left: 0;
    background: var(--text);
    color: var(--bg);
    font-family: var(--sans);
    font-size: var(--t-label);
    padding: 10px 14px;
    border-radius: 16px;
    width: min(138px, calc(100vw - 28px));
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.7);
    transform-origin: top center;
    transition: opacity 0.2s, transform 0.2s;
    white-space: normal;
    line-height: 1.4;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 30%, transparent);
  }
  .cs-intent-popup.visible {
    opacity: 1;
    transform: scale(1);
  }
  .cs-intent-popup strong {
    font-weight: 800;
    display: block;
    margin-bottom: 2px;
  }

  @media (max-width: 900px) {
    .cs-intent {
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
    }
    .cs-intent-stage {
      width: 100%;
      max-width: 288px;
      margin: 0 auto;
      transform: translateX(-5vw);
    }
    .cs-intent-marker { display: flex !important; }   /* tap markers on the screenshot */
    .cs-intent-popup { display: block !important; }    /* tap → popup (JS handles it) */

    .cs-intent-annotations,
    .cs-intent-annotations.cs-intent-side-right {
      position: static;
      display: none;   /* hide the long stacked list; read via tap markers instead */
      flex-direction: column;
      gap: 1.75rem;
      pointer-events: auto;
      left: auto;
      right: auto;
    }
    .cs-intent-item,
    .cs-intent-side-right .cs-intent-item {
      position: static !important;
      top: auto !important;
      height: auto !important;
      transform: none !important;
      margin-top: 0 !important;
      opacity: 1;
      display: grid;
      grid-template-columns: 1.75rem 1fr;
      column-gap: 1rem;
      row-gap: 0.35rem;
      align-items: start;
      max-width: 100%;
      text-align: left;
      padding: 0;
      border: none;
    }
    .cs-intent-item::before {
      content: attr(data-idx);
      grid-row: 1;
      grid-column: 1;
      font-family: var(--display);
      font-weight: 800;
      font-size: var(--t-sub);
      color: var(--text);
      line-height: 1.3;
      text-align: right;
    }
    .cs-intent-item .cs-intent-title {
      grid-row: 1;
      grid-column: 2;
      margin: 0;
    }
    .cs-intent-item .cs-intent-desc {
      grid-row: 2;
      grid-column: 2;
    }
    .cs-intent-image { opacity: 1 !important; }
  }
    
  /* Image inside frame, scrollable on mobile so wide diagrams stay readable */
    @media (max-width: 600px) {
              }

  /* Flow steps — sequence of screenshots with numbers + captions */
  .cs-flow-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--screen-row-gap);
  }
  .cs-flow-step { display: flex; flex-direction: column; position: relative; }
  .cs-flow-step img { width: 100%; display: block; border-radius: 20px; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.25)); }   /* drop-shadow follows the image alpha so it lifts off the frame without a boxy edge */
  /* Flow 01 has UI sticking out ~20px each side (826px wide vs 786px screen). Scale up + center so its screen matches the others. */
  .cs-flow-step img[src*="imgEventNotiFlow01"] { width: 105.09%; margin: 0 -2.545%; max-width: none; }
  .cs-flow-step-num { display: none; }   /* step numbers dropped */
  .cs-flow-step-caption {
    order: 1;            /* render below the image */
    font-family: var(--sans);
    font-size: var(--body-size);
    font-weight: 500;
    color: var(--text);
    margin: calc(0.85rem + 4px) 0 0;
    min-height: 2.8em;   /* reserve 2 lines so steps stay even in the grid */
    line-height: 1.4;
    text-align: center;
  }
  .cs-flow-nav { display: none; }
  @media (max-width: 600px) {
    .cs-flow-steps {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 0.9rem;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .cs-flow-steps::-webkit-scrollbar { display: none; }
    .cs-flow-step { flex: 0 0 70%; scroll-snap-align: center; opacity: 0.2; transition: opacity 0.3s ease; }   /* a touch smaller than before; ~live solution size */
    .cs-flow-steps > .cs-flow-step::after { display: none; }   /* carousel + dots show the flow on mobile */
    .cs-flow-step:first-child { margin-left: 15%; }    /* room for first card to center */
    .cs-flow-step:last-child { margin-right: 15%; }    /* room for last card to center */
    .cs-flow-step.active { opacity: 1; }
    .cs-flow-step img { width: 100%; }
    .cs-flow-step-caption { margin: calc(0.85rem + 4px) 0 0; min-height: 0; }
    .cs-intent-frame:has(.cs-flow-steps) { padding-inline: 0; }   /* images reach frame edges; vertical from base */
    .cs-next-btn { max-width: 100%; }
    .cs-flow-nav { display: flex; justify-content: center; gap: 8px; margin-top: 2.2rem; }
    .cs-flow-dot {
      width: 7px; height: 7px; border-radius: 50%; padding: 0; border: none;
      background: color-mix(in srgb, var(--text) 22%, transparent);
      transition: background-color 0.2s ease, transform 0.2s ease;
    }
    .cs-flow-dot.active { background: var(--text); transform: scale(1.15); }
  }

  /* Dual frame — two image boxes side by side with captions (e.g. product vs reference) */
          @media (max-width: 600px) {
      }
  .cs-compare-frame { padding-inline: 1.5rem; }   /* vertical from base (uniform) */
  .cs-compare-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(0.75rem, 2.5vw, 1.25rem);
    align-items: start;
    max-width: 720px;   /* smaller than full width — keeps the landscape shots compact */
    margin: 0 auto;
  }
  .cs-compare-pair img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
  }
  @media (max-width: 600px) {
    .cs-compare-pair { grid-template-columns: 1fr; }
  }

  /* Goal boxes — numbered card list */
  .goal-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
  }
  .goal-box {
    background: var(--surface);
    border-radius: var(--frame-radius);
    outline: 1px solid var(--border);
    outline-offset: -1px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: background-color 0.4s ease, outline-color 0.4s ease;
  }
  .goal-num {
    font-family: var(--display);
    font-size: var(--t-small);
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--muted);
  }
  .goal-text {
    /* same text style as the case hook (.cs-hook) */
    font-family: var(--display);
    font-size: calc(var(--t-sub) + 2px);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.35;
    color: var(--text);
    margin: 0;
  }
  .goal-body {
    font-size: var(--body-size);
    color: color-mix(in srgb, var(--text) 65%, var(--muted));
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
  }

  /* Goal diagram — exported image inside the figure frame */
  .cs-intent-frame:has(> .flowchart-img) { padding-inline: 2.5rem; }   /* vertical from base */
  .flowchart-img {
    display: block;
    width: 100%;
    max-width: 512px;
    height: auto;
    margin: 0 auto;
  }
  /* two captioned screens — same treatment as the flow steps, but a pair */
  .cs-intent-frame:has(.cs-flow-steps.is-pair) { padding-inline: 2.5rem; }   /* vertical from base */
  .cs-flow-steps.is-pair { grid-template-columns: 1fr 1fr; max-width: 480px; margin: 0 auto; }
  .cs-flow-steps.is-pair > .cs-flow-step::after { display: none; }
  /* single composite screen — centered, capped so the two-phone shot stays phone-sized */
  .cs-single-shot { display: block; width: 100%; max-width: 515px; height: auto; margin: 0 auto; }
  .cs-single-shot.is-phone { max-width: 280px; }
  /* tutorial step eyebrow — small label under the caption description */
  .cs-step-eyebrow { display: block; margin-top: 0.35rem; font-family: var(--sans); font-size: 0.72em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  /* Case study mobile compaction — shorter hero + tighter section spacing */
  @media (max-width: 600px) {
    .cs-hero { height: clamp(200px, 46vw, 280px); margin: 1.5rem 0 1rem; }
    /* keep phones legible; they scroll horizontally */
    .cs-hero-full { height: auto; }   /* keep full image uncropped on mobile too */
    .cs-section { margin-bottom: 2.25rem; }
    .cs-intent-frame { margin-top: 1.25rem; }
    .dual-frame { margin-top: 1.25rem; }
    .cs-hero { margin-top: 1rem; }
  }

  /* Subsection label inside cs-section (e.g. (1) User Side / (2) Host Side) */
  .cs-subsection-label {
    font-family: var(--display);
    font-size: var(--t-sub);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 2.5rem 0 1rem;
  }
  .cs-section > .cs-subsection-label:first-of-type {
    margin-top: 1.5rem;
  }

  /* User Flow diagram (inline SVG) */
      @media (max-width: 768px) {
      }

  /* ABOUT eyebrow — section label inside the about frame (medium scale, matches .cs-section-label) */
  .about-eyebrow {
    font-family: var(--sans);
    font-size: var(--t-label);
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 1.5rem;
  }

  /* ABOUT TWO-COL — wrapped as a card frame */
  .about-wrap {
    max-width: 800px;
    width: 100%;                                  /* padding handles the inset (was double-padded) */
    margin: calc(4.5rem + 32px) auto 1.5rem;   /* tightened ~16px toward the footer */
    padding: 0 var(--pad);
    background: transparent;
    border-radius: 0;
    position: relative;
    text-align: center;
  }
  .about-body { text-align: center; max-width: 720px; margin: 0 auto; }
  .about-prose { max-width: 720px; margin: 0 auto; }
  .about-actions { justify-content: center; align-items: center; }
  #about-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    display: none; /* hidden for now — may bring back later */
  }
  .about-body { position: relative; z-index: 1; text-align: center; }
          @media (max-width: 1024px) {
    .about-wrap { grid-template-columns: 1fr; gap: 2rem; }
      }

  /* LABEL TAG */

  /* ABOUT PROSE */
  .about-prose {
    max-width: 1000px;
  }
  .about-prose p {
    color: color-mix(in srgb, var(--text) 65%, var(--muted));
    line-height: 1.6;
    margin-bottom: 1rem;
  }
  .about-prose p:last-child { margin-bottom: 0; }

    .about-stickers {
    margin: 3.75rem 0 3.25rem;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 15%, #000 85%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 15%, #000 85%, transparent 100%);
  }
  .about-stickers::-webkit-scrollbar { display: none; }
  .about-stickers.dragging { cursor: grabbing; }
  .sticker-track {
    display: flex;
    gap: 1.875rem;
    width: max-content;
    align-items: center;
    padding: 1.5rem 0;
  }
  .sticker-photo {
    --base-w: clamp(210px, 26vw, 260px);
    --r: 28px;
    width: var(--base-w);
    aspect-ratio: 4 / 5;
    margin: 0 calc((var(--scl-edge, 1) - 1) * var(--base-w) / 2);
    flex-shrink: 0;
    border-radius: calc(var(--r) / (var(--scl-base, 1) * var(--scl-edge, 1)));
    overflow: hidden;
    background: color-mix(in srgb, #ecedf2 60%, var(--text));
    display: block;
    transform: rotate(var(--rot, 0)) scale(calc(var(--scl-base, 1) * var(--scl-edge, 1)));
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
  }
  .sticker-photo:hover {
    transform: rotate(0deg) scale(1.12);
    z-index: 5;
    position: relative;
  }
  .sticker-photo img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
  /* Touch devices: tapping a sticker shouldn't enlarge it (sticky :hover reads as broken) */
  @media (hover: none), (pointer: coarse) {
    .sticker-photo:hover {
      transform: rotate(var(--rot, 0)) scale(calc(var(--scl-base, 1) * var(--scl-edge, 1)));
      z-index: auto;
      position: static;
    }
  }
  .about-actions {
    margin-top: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
  }
      .about-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 5%, var(--bg));
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    font-family: var(--sans);
    font-size: var(--body-size);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.2s ease,
                border-color 0.2s ease,
                transform 0.2s ease;
  }
  .about-btn:hover {
    background: color-mix(in srgb, var(--text) 9%, var(--bg));
    transform: translateY(-1px);
  }
  .about-btn-icon, .about-btn-icon-default, .about-btn-icon-done {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
  }
        .about-btn-label { transition: opacity 0.2s ease; }
  /* Resume — desktop has it in GNB, mobile shows it in About */
  .about-btn-resume { display: none; padding-left: calc(1.75rem - 2px); }
      .about-btn.copied { padding-left: calc(1.75rem - 2px); }
    @media (max-width: 600px) {
    .nav-cta { display: none; }
    .nav-links { padding-right: 16px; }
    /* Prometheus gradient — scroll-driven on mobile (disable auto rotation) */
    .card-thumb-consent::before {
      animation: none;
      transform: rotate(var(--prom-angle, 0deg));
      transition: transform 0.1s linear;
    }
  }
  .about-prose strong {
    font-weight: 800;
  }
      
  /* ABOUT */
  .about-body { padding-top: 1rem; }

  /* PASSWORD */
    .pw-gate-desc { font-size: var(--body-size); color: var(--text); margin-bottom: 2.5rem; line-height: 1.5; font-weight: 400; letter-spacing: 0.01em; max-width: 480px; }
  .pw-contact {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    display: inline-block;
    transition: opacity 0.2s ease, color 0.15s ease;
  }
  .pw-contact:hover { opacity: 0.7; }
  .pw-contact.copied {
    text-decoration: none;
    color: var(--metric-color);
    animation: copied-stretch 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: left center;
  }
  @keyframes copied-stretch {
    0%   { transform: scaleX(0.7); opacity: 0.6; }
    100% { transform: scaleX(1); opacity: 1; }
  }
  /* Primary CTA — copy email to set up an interview */
  .pw-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--text);
    color: var(--bg);
    border: none;
    border-radius: 999px;
    padding: 0.95rem 1.75rem;
    margin-top: 1.5rem;
    font: inherit;
    font-size: var(--body-size);
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .pw-cta:hover { opacity: 0.85; }
  .pw-cta:active { transform: scale(0.98); }
  .pw-cta.copied { opacity: 1; }
  /* secondary "got the password?" line with an underlined toggle */
  .pw-unlock-hint { font-size: var(--t-label); color: var(--muted); margin-top: -8px; min-height: 40px; display: flex; align-items: center; justify-content: center; }
  .pw-unlock-link {
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.25rem;
    font: inherit;
    cursor: pointer;
    transition: color 0.15s ease;
  }
  .pw-unlock-link:hover { color: var(--text); }
  /* Inline password entry — same size as the hint, underlined field + arrow, no box */
  .pw-inline-wrap { display: inline-flex; align-items: flex-end; gap: 8px; vertical-align: middle; border-bottom: 1px solid var(--border); padding-bottom: 1px; }   /* stroke spans the field + arrow */
  .pw-inline-wrap[hidden] { display: none; }
  .pw-inline-input {
    border: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    line-height: 1.5;
    letter-spacing: 0.12em;
    text-align: center;
    outline: none;
    padding: 0;
    width: 11.5ch;
  }
  .pw-inline-input::placeholder { color: var(--muted); letter-spacing: 0; }
  .pw-inline-submit {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0; padding: 0; transform: translateY(-3px);   /* icon-sized so the wrap stays field height; 40px touch via ::before */
    background: none; border: none; cursor: pointer;
    color: var(--muted); transition: color 0.15s ease, opacity 0.15s ease;
  }
  .pw-inline-submit::before {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 40px; height: 40px; transform: translate(-50%, -50%);
  }
  .pw-inline-submit:hover { color: var(--text); }
  .pw-input-wrap { display: flex; background: var(--surface); border-radius: 999px; overflow: hidden; padding: 0 0 0 1.5rem; width: 100%; max-width: 420px; margin-top: 1.25rem; }
  .pw-input { flex: 1; min-width: 0; padding: 1rem 0.5rem; border: none; background: transparent; font-size: 16px; color: var(--text); outline: none; font-family: var(--sans); letter-spacing: 0.15em; line-height: 1.2; }
  .pw-input[type="password"] { font-size: var(--t-sub); letter-spacing: 0.18em; }
  .pw-input[type="password"]::placeholder { font-size: var(--body-size); letter-spacing: 0; }
  .pw-input-wrap { align-items: center; }
  .pw-input::placeholder { color: var(--muted); }
  .pw-submit { width: 48px; height: 48px; margin: 6px; background: var(--text); color: var(--bg); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity 0.15s; flex-shrink: 0; }
  .pw-submit:hover { opacity: 0.85; }
  .pw-error { font-size: var(--t-label); color: var(--error); margin-top: 1rem; display: none; }

  /* Prometheus teaser lock — header + hook show; the body is softly blurred and fades into the bg until unlocked */
  .pw-lock { position: relative; overflow: hidden; }
  .pw-lock-blur {
    padding-top: 0;
    filter: blur(4px);
    pointer-events: none;
    user-select: none;
    max-height: 464px;
    overflow: hidden;
  }
  /* gradient scrim — content fades from clear at the top into the solid bg toward the bottom */
  .pw-lock-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 15%,
      color-mix(in srgb, var(--bg) 55%, transparent) 38%,
      color-mix(in srgb, var(--bg) 78%, transparent) 58%,
      color-mix(in srgb, var(--bg) 92%, transparent) 75%,
      var(--bg) 90%
    );
  }
  .pw-lock-gate {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem;
  }
  .pw-lock-gate .pw-gate-title { margin-top: 0; margin-bottom: 0.75rem; }
  .pw-lock-gate .pw-gate-desc { margin-bottom: 0.75rem; }
  .pw-lock.unlocked .pw-lock-blur {
    filter: none;
    pointer-events: auto;
    user-select: auto;
    max-height: none;
    overflow: visible;
  }
  .pw-lock.unlocked .pw-lock-scrim { display: none; }
  .pw-lock.unlocked .pw-lock-gate { display: none; }

  /* Prometheus teaser — light "interview invite" treatment: the blur fades to light, gate flips to dark-on-light, and the footer follows white */
  body.on-consent .pw-lock-scrim {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      color-mix(in srgb, #e7e7e7 55%, transparent) 20%,
      color-mix(in srgb, #e7e7e7 78%, transparent) 45%,
      color-mix(in srgb, #e7e7e7 92%, transparent) 70%,
      #e7e7e7 88%
    );
  }
  body.on-consent .pw-lock-gate .pw-gate-title,
  body.on-consent .pw-lock-gate .pw-gate-desc { color: #1a1d24; }
  body.on-consent .pw-cta { background: #1a1d24; color: #fff; }
  body.on-consent .pw-unlock-hint,
  body.on-consent .pw-unlock-link { color: #6a6d75; }
  body.on-consent .pw-unlock-link:hover { color: #1a1d24; }
  body.on-consent .pw-inline-input { color: #1a1d24; }
  body.on-consent .pw-inline-wrap { border-bottom-color: #1a1d24; }
  body.on-consent .pw-inline-input::placeholder { color: #8a8d95; }
  body.on-consent .pw-inline-submit { color: #1a1d24; }
  body.on-consent .pw-inline-submit:hover { color: #1a1d24; opacity: 0.55; }
  /* white fade lives in the page background, anchored to the document bottom: fades up out of the dark page, stays solid white through the footer and the fill below it. footer keeps a transparent bg, so leaving prometheus never re-paints a block — no nav flicker. */
  body.on-consent #page-consent { min-height: 0; }
  body.on-consent .site-footer-mark { display: none; }   /* prometheus ends at its own light gate; no footer here */

  /* TOGGLE */

  @media (max-width: 480px) {
    :root { --pad: 1rem; --body-size: 1rem; }
    .home-hero { padding-left: 1.75rem; padding-right: 1.75rem; }
    .hero-title {
      -webkit-line-clamp: 4;
      font-size: clamp(1.51rem, 9vw, 4rem);
    }
    .page { padding-top: 80px; }
  }

  /* Mobile typography rebalance — keep fixed-size display elements scaled with body on small screens */
  @media (max-width: 600px) {
    .cs-subsection-label { font-size: var(--body-size); margin: 1.5rem 0 0.75rem; }
    .cs-intent-title { font-size: var(--t-sub); }
    .goal-num { font-size: var(--t-label); }
  }

  /* Mobile case-detail type scale — lighter body alone restores hierarchy (heads stay at their natural mobile size, not enlarged). Problem card titles capped since goal-text adds +2px and was dominating. Scoped to case pages; home untouched. */
  @media (max-width: 600px) {
    .page:not(#page-home) {
      --body-size: 0.97rem;   /* ~17px -> ~15.5px: opens the gap above body so heads read clearly */
    }
    .page:not(#page-home) .goal-text { font-size: 1.25rem; }   /* 20px — was t-sub+2 (24px), too big on mobile */
    .cs-intent-frame:has(> .flowchart-img) { padding-inline: 1rem; }   /* mobile: shrink side padding so the diagram reads bigger */
    /* consistent frame<->text gap: text-after-frame was 1.75rem vs frame-after-text 1.25rem (uneven). unify to 1.25rem */
    .cs-section :where(.dual-frame, .cs-intent-frame, .goal-list, .flowchart-img, .summary-stats, .outcome-stats, .outcome-stats-2, .cs-flow-steps) + :where(p, .cs-subsection-label, .cs-callout) { margin-top: 1.25rem; }
  }

  /* Mobile spacing + radius tightening — fights the bloated/loose feel */
  @media (max-width: 600px) {
    :root {
      --frame-radius: 20px;
      --frame-gap: 3.5rem;
    }
    /* Title + description block: tighter vertical rhythm */
    .cs-hook { margin-top: 1.25rem; }
    .cs-meta { margin-top: 1.75rem; gap: 0.5rem 2rem; }
    .cs-meta-item span { margin-top: 0.35rem; }
    .cs-section-label { margin-bottom: 1rem; }
    .cs-body { padding-top: 1.5rem; padding-bottom: 0; }
    .card-thumb-inner,
    .card-thumb-inner img { border-radius: 14px !important; }

    .goal-box { padding: 1.25rem; gap: 0.45rem; }
    .summary-stats { gap: 0.75rem; margin-top: 1.25rem; }
    .summary-box { padding: 1.25rem; gap: 0.4rem; }
    .summary-icon { width: 29px; height: 29px; }
    .cs-single-shot.is-phone { max-width: 200px; }
    .dual-frame, .goal-list { gap: 0.75rem; margin-top: 1.25rem; }

      }
  @media (min-width: 481px) and (max-width: 768px) {
    :root { --pad: 1.5rem; }
    }
  @media (min-width: 769px) and (max-width: 1024px) {
    :root { --pad: 2rem; }
  }

  /* CUSTOM CURSOR */
  * { cursor: none !important; }
  #custom-cursor {
    position: fixed;
    width: 20px; height: 20px;
    pointer-events: none;
    z-index: 9999;
    transform: translate(0, 0);
  }
  #custom-cursor svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)); }
  #cursor-bubble {
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    background: #ecedf2;
    color: #0d0d0d;
    font-family: var(--sans);
    font-size: var(--t-label);
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 20px 999px 999px 999px;
    border: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 15%, transparent);
    white-space: nowrap;
    opacity: 0;
    transform: translate(22px, 12px) scale(0.7);
    transition: opacity 0.22s cubic-bezier(0.34,1.56,0.64,1), transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
    letter-spacing: 0.01em;
  }
  #cursor-bubble.visible {
    opacity: 1;
    transform: translate(22px, 12px) scale(1);
  }

  @media (hover: none), (pointer: coarse) {
    #custom-cursor, #cursor-bubble { display: none !important; }
    * { cursor: auto !important; }
  }

  #emoji-tip {
    position: fixed;
    pointer-events: none;
    z-index: 9997;
    background: var(--text);
    color: var(--bg);
    font-family: var(--sans);
    font-size: var(--t-label);
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 999px 999px 999px 4px;
    border: 1.5px solid var(--text);
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.7);
    transform-origin: bottom left;
    transition: opacity 0.22s cubic-bezier(0.34,1.56,0.64,1), transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
    letter-spacing: 0.01em;
  }

  /* DARK MODE */
  body.dark-mode {
    --bg: #0f1115;
    --text: #dde0e7;
    --muted: #6f7279;
    --surface: #1c1f24;
    --surface2: #262930;
    --border: rgba(255,255,255,0.06);
    --error: #ff5252;
  }
  body.dark-mode .pw-input-wrap { background: var(--surface2); }
  
  /* Sparkle stars — Y2K/Gen-Z retro 4-point sparkles, fast rotating, blurred white */
  .sparkles {
    position: fixed;
    inset: 0;
    overflow: hidden;   /* clip sparkles to viewport — prevents mobile horizontal overflow */
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.6s ease;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,0.15) 100%);
    mask-image: radial-gradient(ellipse 70% 60% at center, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,0.15) 100%);
  }
  body.about-visible .sparkles { opacity: 0.6; }
  .sparkle {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    opacity: var(--op, 1);
    background-color: var(--text);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><defs><filter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'><feGaussianBlur stdDeviation='1.6'/></filter></defs><g filter='url(%23b)' fill='black'><path d='M12,1 L14.5,9.5 L23,12 L14.5,14.5 L12,23 L9.5,14.5 L1,12 L9.5,9.5 Z'/><circle cx='12' cy='12' r='3.2'/></g></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><defs><filter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'><feGaussianBlur stdDeviation='1.6'/></filter></defs><g filter='url(%23b)' fill='black'><path d='M12,1 L14.5,9.5 L23,12 L14.5,14.5 L12,23 L9.5,14.5 L1,12 L9.5,9.5 Z'/><circle cx='12' cy='12' r='3.2'/></g></svg>") center/contain no-repeat;
    animation-name: sparkle-rotate;
    animation-duration: calc(var(--dur) * 1.6);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: var(--delay, 0s);
    will-change: transform;
  }
  @keyframes sparkle-rotate {
    0%   { transform: rotate(0deg)   scale(0.7); }
    50%  { transform: rotate(180deg) scale(1); }
    100% { transform: rotate(360deg) scale(0.7); }
  }
  /* all other elements use CSS vars — auto dark mode */

  /* CONTACT CHAT — chat-styled contact form at the bottom of About */
  .contact-chat {
    margin-top: calc(4.5rem + 32px);  /* match the 섬넬→About gap */
    width: 100%;                       /* width follows the About column */
  }
  .contact-chat .about-eyebrow { margin-bottom: 1.5rem; }   /* match About's eyebrow→title gap */
  .chat-hook, .about-hook {
    font-family: var(--display);
    font-size: var(--t-title);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0 0 calc(1.75rem + 16px);
  }
  /* The greeting is the About section's real title — tighter gap to the prose below */
  .about-hook { margin-bottom: 1.5rem; }
  /* Phone device wrapping the chat — top exposed, bottom dissolves away */
  .chat-window {
    display: flex; flex-direction: column; gap: 0.75rem;
    height: 250px; overflow-y: auto;     /* ~3 messages */
    padding: 0.25rem 0.25rem 0;
    scrollbar-width: none;
  }
  .chat-window::-webkit-scrollbar { display: none; }
  .chat-window::before { content: ''; margin-top: auto; }   /* bottom-anchored: messages rise up from the bottom */
  /* Edge fades when the conversation overflows (toggled in JS) — softens the hard clip */
  .chat-window.cw-fade-top {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 56px);
  }
  .chat-window.cw-fade-bottom {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
  }
  .chat-window.cw-fade-top.cw-fade-bottom {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 40px), transparent 100%);
  }
  .chat-msg { display: flex; align-items: flex-end; gap: 0.5rem; max-width: 100%; }
  .chat-msg-user { flex-direction: row-reverse; }
    .chat-avatar {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; line-height: 1;
    font-size: var(--body-size); background: #aab0bb;   /* brighter cool gray */
  }
  .chat-bubble {
    /* match body text style */
    font-family: var(--sans); font-size: var(--body-size); line-height: 1.5;
    font-weight: 400; letter-spacing: 0.01em; color: var(--text); text-align: left;
    padding: 1rem 1.4rem; border-radius: 22px;
    max-width: 30rem; word-break: keep-all; overflow-wrap: break-word; white-space: pre-wrap;
    animation: chat-pop 0.25s cubic-bezier(0.34,1.56,0.64,1);
  }
  .chat-msg-bot .chat-bubble {
    background: var(--surface); color: var(--text);
    border-bottom-left-radius: 3px;
  }
  .chat-msg-user .chat-bubble {
    background: var(--text); color: var(--bg);
    border-bottom-right-radius: 3px;
  }
    @keyframes chat-pop { from { opacity: 0; transform: translateY(6px) scale(0.96); } to { opacity: 1; transform: none; } }
  .chat-system { text-align: center; color: var(--muted); font-size: 0.9rem; letter-spacing: 0.01em; font-weight: 500; margin: 0.6rem 0 0.3rem; }
  .chat-typing .chat-bubble { display: flex; gap: 5px; align-items: center; padding: 1.05rem 1.2rem; }
  .chat-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--muted);
    animation: chat-blink 1.2s infinite ease-in-out;
  }
  .chat-dot:nth-child(2) { animation-delay: 0.2s; }
  .chat-dot:nth-child(3) { animation-delay: 0.4s; }
  @keyframes chat-blink { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 0.9; transform: translateY(-2px); } }

  .chat-input-row {
    position: relative; z-index: 2;     /* above the bottom fade — never dissolves */
    display: flex; align-items: center; gap: 0.5rem; margin-top: calc(0.875rem + 4px);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 999px; padding: 0.45rem 0.45rem 0.45rem calc(1.25rem + 4px);
  }
  .chat-input {
    flex: 1; min-width: 0; border: none; background: transparent; color: var(--text);
    font-family: var(--sans); font-size: 16px; padding: 0.5rem 0; outline: none;   /* 16px stops iOS zoom-on-focus */
    text-align: left; -webkit-user-select: text; user-select: text;
  }
  .chat-input::placeholder { color: var(--muted); }
  .chat-input:disabled { opacity: 0.6; }
  .chat-send {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: none;
    background: var(--text); color: var(--bg);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s ease;
  }
  .chat-send:hover { transform: scale(1.08); }
  .chat-send:active { transform: scale(0.95); }
  .chat-send:disabled { opacity: 0.4; transform: none; }
    /* fold shows the button bg → reads as a paper plane */
  .chat-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  /* Copy-email — a quiet text link tucked under the intro message */
  .chat-copy-link {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 0.35rem;
    margin: calc(-0.55rem - 2px) 0 -0.3rem 30px;   /* indent + absorb taller padding; tighter to bubble */
    background: none; border: none; padding: 0.7rem 0.5rem;   /* taller tap target */
    font-family: var(--sans); font-size: var(--t-small); color: var(--muted);
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .chat-copy-link u { text-decoration-line: underline; text-underline-offset: 3px; }
  .chat-copy-link:hover u { color: var(--text); }   /* only the underlined part reacts */
  .chat-copy-link.copied { color: var(--text); }   /* already full — hover has no further effect */
  /* Intro reveal — first bubble + copy link pop together when the chat scrolls into view */
  .chat-onload { display: none; }
  .chat-onload .chat-bubble { animation: none; }
  /* ease-out (no overshoot) — overshoot easing made the first bubble jolt up past its spot then settle back */
  .chat-window.revealed .chat-msg.chat-onload { display: flex; animation: chat-reveal 0.45s cubic-bezier(0.22,1,0.36,1) forwards; }
  .chat-window.revealed-link .chat-copy-link.chat-onload { display: inline-flex; }   /* no motion, just appears */
  @keyframes chat-reveal { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
  .chat-copy-check { display: none; flex-shrink: 0; }
  .copied .chat-copy-check { display: inline-flex; }
  /* Mobile — narrow chat window needs a percentage cap so bubbles keep their
     left/right alignment instead of filling the whole width. */
  @media (max-width: 600px) {
    .chat-bubble { max-width: 82%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .chat-dot { animation: none; }
    .chat-bubble { animation: none; }
    .chat-window.revealed .chat-onload, .chat-window.revealed-link .chat-onload { animation: none; }
  }