/* v2 proposal. Loaded after /styles.css, which supplies the tokens. */

/* v2 proposal. Loaded after /styles.css, which supplies the base tokens.
   Background texture and dock are taken from cindyly.design, as requested. */

:root {
  /* Paper and ground from cindyly.design */
  --ground-2: #f7f7f5;
  --paper-edge: #e4e4e0;
  --grid-color: #efefec;
  --panel: #efefec;
  --glass: rgba(255, 255, 255, 0.72);
  --accent-container: #dfe8ec;
  /* The accent fails AA as small text; text uses the darker slate of the same hue. */
  --accent-text: #3f5a68;
  /* Cindy's #0081f2 gives 3.9:1 with white; #005fb8 keeps the hue and reaches APCA Lc 86 for the 11px label. */
  --dock-select: #005fb8;
  --dock-ink: #1e1a15;
  --card: #ffffff;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-pill: 999px;
  --gutter: 40px;
  --dock-clearance: 160px;
}

html,
body {
  height: auto;
  min-height: 100%;
  overflow-x: clip;
}

html {
  background: var(--paper-edge);
}

body {
  position: relative;
  background: transparent;
  padding-bottom: var(--dock-clearance);
}

/* ---------- Background texture ---------- */

/* The paper: a full-viewport sheet whose blur fades it into the darker ground at the edges. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background: var(--ground-2);
  filter: blur(60px);
  pointer-events: none;
}

.v2-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

/* 24px grid, 1px lines, clipped to the paper. */
.v2-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 60px, #000 calc(100% - 60px), transparent),
    linear-gradient(to bottom, transparent, #000 60px, #000 calc(100% - 60px), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 60px, #000 calc(100% - 60px), transparent),
    linear-gradient(to bottom, transparent, #000 60px, #000 calc(100% - 60px), transparent);
  mask-composite: intersect;
}

/* Static film grain: random greys at 2px cells, laid on with overlay at 30%.
   It sits on body (not inside .v2-bg) so the blend reaches the paper underneath. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("grain.png");
  background-size: 256px 256px;
  image-rendering: pixelated;
  mix-blend-mode: overlay;
  opacity: 0.3;
}

@media (pointer: coarse) {
  .v2-bg::before {
    -webkit-mask-image: none;
    mask-image: none;
  }

  body::after {
    display: none;
  }
}

/* ---------- Top bar (subpages) ---------- */

.v2-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px var(--gutter);
}

.v2-name {
  font-family: var(--display);
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: var(--primary);
}

.v2-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

/* ---------- Dock (cindyly.design) ---------- */

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  z-index: 50;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.dock-bar {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  padding: 10px 20px 9px;
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    rgba(255, 255, 255, 0.85) 1px 1px inset,
    rgba(255, 255, 255, 0.25) -1px -1px inset,
    rgba(255, 255, 255, 0.9) 0 12px 20px -14px inset,
    rgba(40, 70, 120, 0.22) 0 -12px 20px -14px inset,
    rgba(40, 70, 120, 0.14) 0 10px 30px;
  transition: box-shadow 0.3s;
}

/* The SVG lens only on desktop pointers: on phones a url() backdrop filter can stop the bar from rendering */
@supports (backdrop-filter: url(#liquid-lens)) and (not (-webkit-touch-callout: none)) {
  @media (hover: hover) and (pointer: fine) {
    .dock-bar {
      backdrop-filter: blur(26px) saturate(170%) url(#liquid-lens);
    }
  }
}

.dock-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120px 70px at 50% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.18));
  opacity: 0.9;
}

.dock-bar:hover {
  box-shadow:
    rgba(255, 255, 255, 0.95) 1px 1px inset,
    rgba(255, 255, 255, 0.3) -1px -1px inset,
    rgb(255, 255, 255) 0 12px 20px -14px inset,
    rgba(40, 70, 120, 0.26) 0 -12px 20px -14px inset,
    rgba(40, 70, 120, 0.18) 0 14px 36px;
}

.dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  -webkit-tap-highlight-color: transparent;
}

.dock-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.16s, filter 0.16s;
}

.dock-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.dock-icon--folder {
  width: 58px;
  height: 45px;
  border-radius: 0;
  overflow: visible;
  filter: drop-shadow(rgba(0, 0, 0, 0.12) 1px 2px 3px);
}

.dock-icon--lab {
  background: linear-gradient(rgb(255, 246, 249), rgb(255, 227, 237));
  box-shadow: rgba(226, 138, 171, 0.16) 0 0 0 0.5px;
}

.dock-icon--profile {
  background: #c8d9f0;
  box-shadow: rgba(122, 156, 204, 0.14) 0 0 0 0.5px;
}

.dock-item:hover .dock-icon {
  transform: translateY(-2px);
  filter: drop-shadow(rgba(40, 70, 120, 0.18) 0 4px 6px);
}

.dock-item:active .dock-icon {
  transform: scale(0.93);
}

.dock-label {
  display: inline-block;
  padding: 0 5px;
  border-radius: 4px;
  font-family: Inter, var(--sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.18px;
  color: var(--dock-ink);
}

.dock-item[aria-current="page"] .dock-label {
  background: var(--dock-select);
  color: #ffffff;
  line-height: 19px;
}

.dock-item:focus-visible {
  outline: none;
}

.dock-item:focus-visible .dock-label {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .dock-icon {
    transition: none;
  }
}

/* ---------- Home ---------- */

.v2-home {
  grid-template-rows: auto 1fr;
  padding-bottom: 0;
}

.v2-home .identity {
  border-bottom: none;
  padding-bottom: 0;
  gap: var(--space-4);
}

.v2-home .stage {
  padding-block: var(--vh-space-5) calc(var(--vh-space-5) + 40px);
}

/* ---------- Page shell ---------- */

.v2-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.v2-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 24px;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.v2-back:hover,
.v2-back:focus-visible {
  color: var(--primary);
}

.v2-back svg {
  width: 0.8em;
  height: 0.8em;
}

.v2-eyebrow {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Hero ---------- */

.v2-hero {
  max-width: 860px;
  padding-top: 72px;
}

.v2-hero-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.v2-client {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary);
}

.v2-title {
  margin: 0 0 24px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--primary);
}

.v2-result {
  margin: 0 0 28px;
  max-width: 42ch;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.55;
  letter-spacing: -0.02em;
  color: var(--primary);
}

.v2-lead {
  margin: 0;
  max-width: 58ch;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--body-text);
}

.v2-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-tag {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}

/* ---------- Placeholder image ---------- */

.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  text-align: center;
}

.ph span {
  max-width: 36ch;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
}

.v2-cover {
  margin-top: 64px;
  aspect-ratio: 16 / 9;
}

.v2-media {
  display: block;
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  background: var(--panel);
}

/* ---------- Blocks and sections ---------- */

.v2-block {
  margin-top: 128px;
}

.v2-intro {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: start;
}

.v2-intro .v2-eyebrow {
  margin-bottom: 14px;
  color: var(--accent-text);
}

.v2-text {
  margin: 0 0 16px;
  max-width: 62ch;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--body-text);
}

.v2-text:last-child {
  margin-bottom: 0;
}

.v2-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 32px;
  margin: 0;
  padding: 28px;
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
}

.v2-meta dt {
  margin-bottom: 6px;
}

.v2-meta dd {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--primary);
}

.v2-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 48px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.v2-stat-value {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--primary);
}

.v2-stat-value.is-pending {
  font-size: 1.125rem;
  line-height: 3.2rem;
  letter-spacing: 0;
  color: var(--muted);
}

.v2-stat-label {
  margin: 0;
  max-width: 24ch;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}

.v2-section {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
  align-items: start;
}

.v2-section-label {
  position: sticky;
  top: 32px;
  margin: 0;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--primary);
}

.v2-section-body {
  min-width: 0;
  max-width: 720px;
}

.v2-sub + .v2-sub {
  margin-top: 40px;
}

.v2-sub .v2-eyebrow {
  margin-bottom: 10px;
}

.v2-subtitle {
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--primary);
}

.v2-pending {
  display: block;
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
  border: 1px dashed rgba(26, 26, 26, 0.24);
  border-radius: var(--radius-s);
}

.v2-pending b {
  font-weight: 600;
  color: var(--body-text);
}

/* Numbered research steps */

.v2-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.v2-steps li {
  position: relative;
  padding: 16px 0 16px 44px;
  border-top: 1px solid var(--hairline);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--body-text);
}

.v2-steps li:last-child {
  border-bottom: 1px solid var(--hairline);
}

.v2-steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 16px;
  font-family: var(--display);
  font-weight: 500;
  color: var(--accent-text);
}

.v2-steps strong {
  color: var(--primary);
  font-weight: 600;
}

/* Insight cards */

.v2-insights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.v2-card {
  padding: 12px 12px 20px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
}

.v2-card h3 {
  margin: 0 8px 6px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--primary);
}

.v2-card p {
  margin: 0 8px;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--body-text);
}

/* Small coded UI fragments that illustrate a finding without a screenshot */

.frag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 140px;
  margin-bottom: 16px;
  overflow: hidden;
  background: var(--panel);
  border-radius: var(--radius-s);
}

.fbar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: #cfd4d7;
}

.fbar.soft {
  background: #dfe3e5;
}

.frag-field {
  width: 70%;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 6px;
}

.frag-field .fbar + .fbar {
  margin-top: 8px;
}

.frag-field-label {
  width: 30%;
  margin-bottom: 8px;
}

.frag-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 64%;
}

.frag-bubble {
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--hairline);
}

.frag-bubble.me {
  align-self: flex-end;
  background: var(--accent-container);
  border-color: transparent;
}

.frag-phone {
  position: relative;
  width: 52px;
  height: 96px;
  padding: 10px 0 0 8px;
  background: var(--card);
  border: 1px solid rgba(26, 26, 26, 0.24);
  border-radius: 10px;
  overflow: hidden;
}

.frag-phone .fbar {
  width: 70px;
}

.frag-phone .fbar + .fbar {
  margin-top: 7px;
}

.frag-rotate {
  width: 22px;
  height: 22px;
  color: var(--muted);
}

.frag-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.frag-laptop {
  width: 38px;
  height: 38px;
  color: var(--primary);
}

.frag-people {
  display: flex;
  gap: 8px;
}

.frag-people span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
}

.frag-people span.idle {
  background: #cfd4d7;
}

.frag-btn {
  display: block;
  width: 64px;
  height: 20px;
  margin-top: 12px;
  border-radius: 6px;
  background: var(--primary);
}

.frag-flat {
  display: flex;
  gap: 10px;
}

.frag-flat .frag-field {
  width: 96px;
}

.frag-cursor {
  position: absolute;
  width: 16px;
  height: 16px;
  color: var(--primary);
}

.frag-rel {
  position: relative;
}

.frag-focus {
  outline: 2px dashed var(--accent-text);
  outline-offset: 4px;
}

.frag-key {
  padding: 4px 9px;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-bottom-width: 3px;
  border-radius: 6px;
}

/* Before / after product changes */

.v2-change + .v2-change {
  margin-top: 48px;
}

.v2-change-head {
  display: flex;
  gap: 16px;
  align-items: baseline;
}

.v2-num {
  flex-shrink: 0;
  font-family: var(--display);
  font-weight: 500;
  color: var(--accent-text);
}

.v2-ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-left: 36px;
}

.v2-ba > div {
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s);
}

.v2-ba > div.after {
  background: var(--card);
  border-color: var(--accent);
}

.v2-ba .v2-eyebrow {
  margin-bottom: 8px;
}

.v2-ba p {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--body-text);
}

/* Pull quote for the closing lesson */

.v2-quote {
  margin: 0;
  max-width: 34ch;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--primary);
}

.v2-caption {
  margin: 24px 0 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Next case / feature card */

.v2-next {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  background: var(--card);
  transition: border-color 0.2s var(--ease-out);
}

.v2-next:hover,
.v2-next:focus-visible {
  border-color: var(--accent);
}

.v2-next .ph {
  aspect-ratio: 4 / 3;
}

.v2-next h3 {
  margin: 8px 0 8px;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--primary);
}

.v2-next p {
  margin: 0 0 16px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--body-text);
}

.v2-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
}

.v2-cta svg {
  width: 0.85em;
  height: 0.85em;
}

/* Feature card (Experiments) */

.v2-feature {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}

.v2-feature h2 {
  margin: 16px 0 12px;
  font-family: var(--display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--primary);
}

.v2-feature .v2-result {
  font-size: 1.0625rem;
  margin-bottom: 12px;
}

.v2-feature .v2-meta-line {
  margin: 0 0 24px;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ---------- About ---------- */

.v2-about-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
  padding-top: 72px;
}

.v2-portrait {
  aspect-ratio: 4 / 5;
}

.v2-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-rows li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--hairline);
}

.v2-rows li:last-child {
  border-bottom: 1px solid var(--hairline);
}

.v2-row-role {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--primary);
}

.v2-row-note {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--body-text);
}

.v2-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.v2-photos .ph {
  aspect-ratio: 4 / 5;
}

.v2-photos .ph.wide {
  grid-column: span 2;
  aspect-ratio: auto;
}

/* ---------- Case cover: content slides over it (cindyly.design) ---------- */

.v2-cover-stick {
  position: sticky;
  top: 88px;
  z-index: 0;
  margin-top: 64px;
}

.v2-cover-stick .v2-cover,
.v2-cover-stick .v2-media {
  margin-top: 0;
}

.v2-sheet {
  position: relative;
  z-index: 1;
  margin-top: 36vh;
  padding-top: 72px;
}

.v2-sheet::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -400px;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background: var(--ground-2);
  -webkit-mask-image: linear-gradient(transparent 0px, rgba(0, 0, 0, 0.02) 5px, rgba(0, 0, 0, 0.06) 10px, rgba(0, 0, 0, 0.12) 15px, rgba(0, 0, 0, 0.2) 20px, rgba(0, 0, 0, 0.3) 25px, rgba(0, 0, 0, 0.42) 30px, rgba(0, 0, 0, 0.56) 35px, rgba(0, 0, 0, 0.7) 40px, rgba(0, 0, 0, 0.84) 44px, rgba(0, 0, 0, 0.94) 48px, #000 52px);
  mask-image: linear-gradient(transparent 0px, rgba(0, 0, 0, 0.02) 5px, rgba(0, 0, 0, 0.06) 10px, rgba(0, 0, 0, 0.12) 15px, rgba(0, 0, 0, 0.2) 20px, rgba(0, 0, 0, 0.3) 25px, rgba(0, 0, 0, 0.42) 30px, rgba(0, 0, 0, 0.56) 35px, rgba(0, 0, 0, 0.7) 40px, rgba(0, 0, 0, 0.84) 44px, rgba(0, 0, 0, 0.94) 48px, #000 52px);
}

.v2-sheet > .v2-block:first-child {
  margin-top: 0;
}

/* ---------- Figures and image placeholders inside sections ---------- */

.v2-figure {
  margin: 32px 0 0;
}

.v2-figure .ph {
  aspect-ratio: 16 / 10;
}

.v2-figure .ph.tall {
  aspect-ratio: 4 / 3;
}

.v2-figure figcaption,
.v2-pair figcaption {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}

.v2-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0 0 36px;
}

.v2-pair figure {
  margin: 0;
}

.v2-pair .ph {
  aspect-ratio: 4 / 3;
}

.v2-list {
  margin: 16px 0 0;
  padding-left: 1.2em;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--body-text);
}

.v2-list li::marker {
  color: var(--accent);
}

.v2-list strong {
  color: var(--primary);
  font-weight: 600;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .v2-intro,
  .v2-section,
  .v2-feature,
  .v2-about-hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .v2-section-label {
    position: static;
  }

  .v2-stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  :root {
    --gutter: 16px;
  }

  .v2-top {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .v2-links .about-link:not(.keep) {
    display: none;
  }

  .v2-hero,
  .v2-about-hero {
    padding-top: 40px;
  }

  .v2-block {
    margin-top: 88px;
  }

  .v2-insights,
  .v2-ba,
  .v2-meta {
    grid-template-columns: 1fr;
  }

  .v2-ba,
  .v2-pair {
    margin-left: 0;
    margin-top: 12px;
  }

  .v2-pair {
    grid-template-columns: 1fr;
  }

  .v2-sheet {
    margin-top: 24vh;
  }

  .v2-next {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .v2-rows li {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .v2-photos {
    grid-template-columns: 1fr 1fr;
  }

  .v2-photos .ph.wide {
    aspect-ratio: 3 / 2;
  }

  .dock {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }

  .dock-bar {
    gap: 16px;
    padding: 16px 28px 12px;
    border-radius: 22px;
  }

  .dock-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
  }

  .dock-icon--folder {
    width: 56px;
    height: 50px;
  }

  .dock-label {
    font-size: 11px;
    line-height: 16px;
    padding: 0 4px;
  }

  .dock-item[aria-current="page"] .dock-label {
    line-height: 16px;
  }

  .v2-cover-stick {
    top: 64px;
  }

  .v2-home .stage {
    padding-bottom: var(--space-3);
  }
}

/* =========================================================
   Home variants (homes/*.html)
   ========================================================= */

.h-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.h-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0;
}

.h-hero {
  padding: clamp(48px, 10vh, 120px) 0 0;
}

.h-bio {
  margin: 0;
  max-width: 30ch;
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.035em;
  color: var(--primary);
}

.h-bio.wide {
  max-width: 34ch;
}

.h-bio .soft {
  color: var(--muted);
}

.h-bio a {
  color: var(--primary);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.14em;
  text-decoration-color: var(--accent);
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
  border-radius: 4px;
}

.h-bio a:hover,
.h-bio a:focus-visible {
  background: var(--primary);
  color: var(--ground-2);
  text-decoration-color: transparent;
}

.h-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: 32px;
}

.h-links .about-link {
  text-decoration-color: var(--hairline);
}

.h-section {
  padding-top: clamp(80px, 14vh, 160px);
}

.h-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: 24px;
}

/* A: project cards */

.h-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.h-card {
  display: block;
  padding: 12px 12px 24px;
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  transition: border-color 0.2s var(--ease-out);
}

.h-card:hover,
.h-card:focus-visible {
  border-color: var(--accent);
}

.h-card .h-card-media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-s);
  background: var(--panel);
}

.h-card .ph.h-card-media {
  display: flex;
  border-radius: var(--radius-s);
}

.h-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 8px 10px;
}

.h-card-title {
  margin: 0 8px 8px;
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--primary);
}

.h-card-line {
  margin: 0 8px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--body-text);
}

/* C: case rows */

.h-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.h-rows li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--hairline);
}

.h-case {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--primary);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: var(--hairline);
  border-radius: 3px;
  padding-inline: 0.1em;
  margin-inline: -0.1em;
  transition: color 0.2s var(--ease-out), background-color 0.2s var(--ease-out), text-decoration-color 0.2s var(--ease-out);
}

.h-case:hover,
.h-case:focus-visible {
  background: var(--primary);
  color: var(--ground-2);
  text-decoration-color: transparent;
}

.h-row-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* E: research index */

.h-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.h-chip {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--body-text);
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.h-chip:hover {
  border-color: var(--accent);
}

.h-chip[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--ground-2);
}

.h-index {
  width: 100%;
  border-collapse: collapse;
}

.h-index th {
  padding: 0 24px 12px 0;
  text-align: left;
  border-bottom: 1px solid var(--primary);
}

.h-index td {
  padding: 22px 24px 22px 0;
  vertical-align: baseline;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--body-text);
}

.h-index tr[data-type] {
  position: relative;
  transition: background-color 0.2s var(--ease-out);
}

.h-index tr[data-type]:hover {
  background: var(--glass);
}

.h-index tr[hidden] {
  display: none;
}

.h-index .h-proj {
  font-family: var(--display);
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--primary);
}

.h-index .h-proj::after {
  content: "";
  position: absolute;
  inset: 0;
}

.h-index tr[data-type]:hover .h-proj,
.h-index .h-proj:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.16em;
}

.h-index .h-q {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--primary);
  max-width: 38ch;
}

.h-index .h-year,
.h-index .h-type {
  white-space: nowrap;
  color: var(--muted);
}

/* Floating thumbnail that follows the cursor */

.h-float {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  width: 280px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s var(--ease-out);
}

.h-float.is-on {
  opacity: 1;
}

.h-float img,
.h-float .ph {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  background: var(--card);
}

@media (hover: none) {
  .h-float {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .h-float {
    transition: none;
  }
}

/* Version picker */

.h-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 48px;
}

.h-pick a {
  display: block;
  padding: 24px;
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  transition: border-color 0.2s var(--ease-out);
}

.h-pick a:hover,
.h-pick a:focus-visible {
  border-color: var(--accent);
}

.h-pick strong {
  display: block;
  margin: 8px 0 8px;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--primary);
}

.h-pick span {
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--body-text);
}

@media (max-width: 760px) {
  .h-cards {
    grid-template-columns: 1fr;
  }

  .h-rows li {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .h-index thead {
    display: none;
  }

  .h-index,
  .h-index tbody,
  .h-index tr,
  .h-index td {
    display: block;
  }

  .h-index tr[data-type] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    padding: 20px 0;
    border-bottom: 1px solid var(--hairline);
  }

  .h-index tr[data-type] > td {
    order: 3;
    flex: 1 1 100%;
  }

  .h-index tr[data-type] > .h-year {
    order: 0;
    flex: 0 0 auto;
  }

  .h-index tr[data-type] > .h-type {
    order: 1;
    flex: 1 1 auto;
  }

  .h-index tr[data-type] > td:nth-child(2) {
    order: 2;
  }

  .h-index tr[data-type] > .h-status {
    order: 4;
  }

  .h-index td {
    padding: 0;
    border: none;
  }

  .h-index .h-year,
  .h-index .h-type {
    display: inline;
    font-size: 0.8125rem;
  }

  .h-index .h-type::before {
    content: "·";
    margin: 0 6px;
  }

  .h-index .h-proj {
    display: block;
    margin: 6px 0;
  }

  .h-index .h-status {
    margin-top: 10px;
  }
}

/* =========================================================
   Home A, Cindy mechanics: one screen, work revealed in place
   ========================================================= */

html.hc {
  scrollbar-width: none;
}

html.hc::-webkit-scrollbar {
  display: none;
}

body.hc-at-welcome {
  height: 100dvh;
  overflow: hidden;
  padding-bottom: 0;
}

.hc-panel {
  display: none;
}

.hc-panel.is-active {
  display: block;
}

#hc-welcome.is-active {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100dvh - 96px);
  padding-bottom: 140px;
}

#hc-work.is-active {
  padding: 32px 0 var(--dock-clearance);
}

.hc-leaving-up {
  animation: hcLeaveUp 0.4s cubic-bezier(0.55, 0, 0.85, 0.4) forwards;
}

.hc-leaving-down {
  animation: hcLeaveDown 0.35s cubic-bezier(0.55, 0, 0.85, 0.4) forwards;
}

.hc-entering-down {
  animation: hcEnterDown 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hc-entering .h-card,
.hc-entering .h-section-head {
  animation: hcDeal 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes hcLeaveUp {
  to { opacity: 0; transform: translateY(-48px); }
}

@keyframes hcLeaveDown {
  to { opacity: 0; transform: translateY(40px); }
}

@keyframes hcEnterDown {
  from { opacity: 0; transform: translateY(-40px); }
  to { opacity: 1; transform: none; }
}

@keyframes hcDeal {
  from { opacity: 0; transform: translateY(36px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-leaving-up,
  .hc-leaving-down,
  .hc-entering-down,
  .hc-entering .h-card,
  .hc-entering .h-section-head {
    animation: none;
  }
}

/* Copy-to-clipboard email */

.h-copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s var(--ease-out);
}

.h-copy-text {
  text-decoration-line: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.2s var(--ease-out);
}

.h-copy:hover,
.h-copy:focus-visible {
  color: var(--primary);
}

.h-copy:hover .h-copy-text,
.h-copy:focus-visible .h-copy-text {
  text-decoration-color: var(--accent);
}

.h-copy svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.h-copy .i-check {
  display: none;
  color: var(--accent-text);
}

.h-copy.is-copied .i-copy {
  display: none;
}

.h-copy.is-copied .i-check {
  display: block;
}

.h-copy-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 4px);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--ground-2);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.h-copy.is-copied .h-copy-tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .h-copy-tip {
    transition: none;
  }
}

/* Project shot: blurred colour field with a smaller framed screen on top */

.shot {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: #c9d3dc;
}

.shot::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -2;
  background: var(--shot-bg);
  filter: blur(32px) saturate(1.25);
}

.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("grain.png") 0 0 / 256px 256px;
  image-rendering: pixelated;
  mix-blend-mode: overlay;
  opacity: 0.35;
  pointer-events: none;
}

.shot.tone-art {
  --shot-bg:
    radial-gradient(55% 60% at 22% 18%, #e6f0fb 0%, transparent 70%),
    radial-gradient(60% 65% at 85% 85%, #2f4f86 0%, transparent 70%),
    radial-gradient(50% 55% at 75% 25%, #8fb4e2 0%, transparent 70%),
    linear-gradient(160deg, #b9cfea, #5b7fb3);
}

.shot.tone-gpa {
  --shot-bg:
    radial-gradient(55% 60% at 25% 20%, #eef6e8 0%, transparent 70%),
    radial-gradient(60% 65% at 80% 85%, #2f6b4f 0%, transparent 70%),
    radial-gradient(50% 55% at 78% 25%, #9cc7a6 0%, transparent 70%),
    linear-gradient(160deg, #c6dfc4, #5f9a74);
}

.shot.tone-cos {
  --shot-bg:
    radial-gradient(55% 60% at 22% 20%, #fbe7d3 0%, transparent 70%),
    radial-gradient(60% 65% at 82% 85%, #b4502a 0%, transparent 70%),
    radial-gradient(50% 55% at 78% 22%, #f0a46c 0%, transparent 70%),
    linear-gradient(160deg, #f4c9a2, #d9743f);
}

.shot-frame {
  width: 72%;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.shot-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 9px;
}

.shot-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  padding: 12px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.78);
  text-align: center;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
}

.h-float .shot {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
}

/* Live product demo embedded in a case */

.v2-demo {
  aspect-ratio: auto;
  padding: clamp(20px, 5vw, 56px);
  border-radius: var(--radius-m);
}

.v2-demo .shot-frame {
  width: 100%;
  max-width: 1040px;
}

.v2-demo iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: 9px;
  background: #f7f8fa;
}

.v2-demo-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 12px;
}

.v2-demo-foot .v2-caption {
  margin: 0;
}

@media (max-width: 760px) {
  .v2-demo iframe {
    aspect-ratio: 9 / 16;
  }
}

@media (min-width: 901px) {
  .v2-stats--3 { grid-template-columns: repeat(3, 1fr); }
}
[hidden] { display: none !important; }

/* About: real portrait and photo wall */
img.v2-portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: var(--radius-m);
}

.v2-photos.is-real {
  display: block;
  columns: 3;
  column-gap: 12px;
}

.v2-photos.is-real figure {
  margin: 0 0 12px;
  break-inside: avoid;
}

.v2-photos.is-real img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-s);
}

@media (max-width: 760px) {
  .v2-photos.is-real {
    columns: 2;
    column-gap: 8px;
  }

  .v2-photos.is-real figure {
    margin-bottom: 8px;
  }
}

/* Real product screens inside cases */
.v2-shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s);
  background: #fff;
}

.v2-shot.is-phone {
  max-width: 340px;
}

.v2-today {
  margin-left: 0;
  margin-top: 32px;
}

.v2-today .v2-figure {
  margin: 0;
}

/* Home: name as the page heading, case cards with the product illustrations */
.h-name {
  margin: 0;
  font: inherit;
}

.h-card .h-card-media.is-cover {
  aspect-ratio: 1308 / 816;
  object-fit: cover;
}

.v2-shot.is-board {
  max-width: 520px;
  margin-top: 16px;
}

.v2-shot.is-kiosk {
  max-width: 280px;
}

/* Compact stat row inside a case section */
.v2-stats.v2-stats--inline {
  gap: 20px;
  padding: 16px 0;
  border-top: 0;
  border-bottom: 0;
}

.v2-stats--inline .v2-stat-value {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

/* GPA case: screenshots inside the changes and consequence sections */
.v2-pair.v2-lead-pair {
  margin: 0 0 40px;
  align-items: start;
}

.v2-pair.v2-today {
  align-items: start;
}

.v2-change-shot {
  margin: 16px 0 0 36px;
}

.v2-change-shot .v2-figure,
.v2-sub > .v2-figure {
  margin: 0;
}

.v2-shot.is-small {
  max-width: 240px;
  margin-top: 16px;
}

@media (max-width: 640px) {
  .v2-change-shot {
    margin-left: 0;
  }
}

.v2-change-shot.v2-wide-shot {
  margin: 24px 0 0;
}

/* Phone screenshot with its caption beside it */
.v2-figure.v2-phone-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: end;
  margin-top: 24px;
}

.v2-figure.v2-phone-row.is-indented {
  margin-left: 36px;
}

.v2-figure.v2-phone-row .v2-shot.is-phone {
  max-width: 220px;
  margin: 0;
}

.v2-figure.v2-phone-row figcaption {
  margin: 0;
  max-width: 32ch;
}

@media (max-width: 640px) {
  .v2-figure.v2-phone-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .v2-figure.v2-phone-row.is-indented {
    margin-left: 0;
  }

  .v2-figure.v2-phone-row .v2-shot.is-phone {
    max-width: 200px;
  }
}

/* ---------- Fixed header on scroll ---------- */
.v2-top,
.h-top {
  position: sticky;
  top: 0;
  z-index: 40;
}

/* Full-width glass behind the header, shown once the page scrolls */
.v2-top::before,
.h-top::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: -1;
  background: rgba(247, 247, 245, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--paper-edge);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.is-scrolled .v2-top::before,
.is-scrolled .h-top::before {
  opacity: 1;
}

/* Keep sticky labels and covers clear of the header */
.v2-section-label {
  top: 104px;
}

.v2-cover-stick {
  top: 104px;
}

@media (max-width: 760px) {
  .v2-cover-stick {
    top: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-top::before,
  .h-top::before {
    transition: none;
  }
}

/* Home: the swipe between panels replaces pull-to-refresh and overscroll bounce */
html.hc,
html.hc body {
  overscroll-behavior-y: none;
}

/* Dock: three app-style tiles (option B); option A is saved in design/dock-opcao-a.html */
.dock-icon--folder,
.dock-icon--lab,
.dock-icon--profile {
  width: 45px;
  height: 45px;
  border-radius: 10px;
  overflow: visible;
  background: none;
  box-shadow: none;
  filter: drop-shadow(rgba(0, 0, 0, 0.14) 1px 2px 3px);
}

@media (max-width: 760px) {
  .dock-icon--folder,
  .dock-icon--lab,
  .dock-icon--profile {
    width: 50px;
    height: 50px;
  }
}

/* Selected dock label: same outer height as the others, so the icon doesn't jump */
.dock-item[aria-current="page"] .dock-label {
  margin: 1.5px 0;
}

@media (max-width: 760px) {
  .dock-item[aria-current="page"] .dock-label {
    margin: 0;
  }
}

/* ---------- Page transitions ----------
   Browsers that support cross-document view transitions crossfade between pages.
   The dock and the header keep their place, so only the content changes. */
@view-transition {
  navigation: auto;
}

.dock {
  view-transition-name: dock;
}

.v2-top,
.h-top {
  view-transition-name: top;
}

::view-transition-old(root) {
  animation: vtOut 0.18s cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: vtIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

::view-transition-group(dock),
::view-transition-group(top) {
  animation-duration: 0.32s;
}

@keyframes vtOut {
  to { opacity: 0; }
}

@keyframes vtIn {
  from { opacity: 0; transform: translateY(12px); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(dock),
  ::view-transition-group(top) {
    animation: none;
  }
}

/* Home panels: shorter exit, quicker deal, so the switch doesn't feel stuck */
.hc-leaving-up {
  animation: hcLeaveUp 0.22s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.hc-leaving-down {
  animation: hcLeaveDown 0.22s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.hc-entering-down {
  animation-duration: 0.42s;
}

.hc-entering .h-card,
.hc-entering .h-section-head {
  animation-duration: 0.5s;
  animation-delay: calc(var(--i, 0) * 60ms);
}

/* ---------- Microinteractions ---------- */

/* 1 and 7. Zoomable images and the lightbox */
.is-zoomable {
  cursor: zoom-in;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.is-zoomable:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

@media (hover: hover) {
  .v2-shot.is-zoomable:hover {
    box-shadow: 0 10px 28px -12px rgba(30, 26, 21, 0.28);
  }

  .v2-photos.is-real img.is-zoomable:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -12px rgba(30, 26, 21, 0.35);
  }
}

.v2-lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 56px 16px 24px;
  border: 0;
  background: transparent;
  display: none;
  align-items: center;
  justify-content: center;
}

.v2-lightbox[open] {
  display: flex;
}

.v2-lightbox::backdrop {
  background: rgba(20, 18, 15, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.v2-lightbox.is-open::backdrop {
  opacity: 1;
}

.v2-lightbox figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: min(1400px, 100%);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.2s ease, transform 0.24s var(--ease-out);
}

.v2-lightbox.is-open figure {
  opacity: 1;
  transform: none;
}

.v2-lightbox img {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 140px);
  width: auto;
  height: auto;
  border-radius: var(--radius-s);
  background: #fff;
}

.v2-lightbox figcaption {
  max-width: 64ch;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 255, 255, 0.86);
}

.v2-lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.v2-lightbox-close:hover,
.v2-lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.26);
}

.v2-lightbox-close svg {
  width: 16px;
  height: 16px;
}

/* 3. Reading progress along the bottom of the header */
.v2-progress {
  position: absolute;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  bottom: -1px;
  height: 2px;
  background: var(--dock-select);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* 5. Arrows nudge toward where they lead */
.v2-back svg,
.v2-next .v2-cta svg {
  transition: transform 0.2s var(--ease-out);
}

.v2-back:hover svg,
.v2-back:focus-visible svg {
  transform: translateX(-3px);
}

.v2-next:hover .v2-cta svg,
.v2-next:focus-visible .v2-cta svg {
  transform: translateX(3px);
}

/* 6. Language switch: content fades out and back in */
main,
.v2-main {
  transition: opacity 0.14s ease;
}

.is-lang-switching main,
.is-lang-switching .v2-main {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .is-zoomable,
  .v2-lightbox::backdrop,
  .v2-lightbox figure,
  .v2-back svg,
  .v2-next .v2-cta svg,
  main,
  .v2-main {
    transition: none;
  }

  .v2-photos.is-real img.is-zoomable:hover {
    transform: none;
  }
}

/* Collapsible detail inside a case section */
.v2-details {
  margin-top: 28px;
  border-top: 1px solid var(--hairline);
  padding-top: 16px;
}

.v2-details summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s var(--ease-out);
}

.v2-details summary::-webkit-details-marker {
  display: none;
}

.v2-details summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s var(--ease-out);
}

.v2-details[open] summary::before {
  transform: rotate(45deg);
}

.v2-details summary:hover,
.v2-details summary:focus-visible {
  color: var(--primary);
}

.v2-details > :not(summary) {
  margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .v2-details summary,
  .v2-details summary::before {
    transition: none;
  }
}

/* ---------- Accessibility ---------- */

/* Keep focused elements clear of the sticky header and the dock (WCAG 2.4.11) */
html {
  scroll-padding-top: 96px;
  scroll-padding-bottom: 150px;
}

/* Skip link: hidden until it receives keyboard focus */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--radius-s);
  background: var(--primary);
  color: #ffffff;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  transform: translateY(-160%);
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: none;
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

main:focus {
  outline: none;
}

/* Bigger hit areas for the small header links, with no visual change (WCAG 2.5.8) */
.v2-links .about-link,
.v2-links .lang-toggle,
.h-top .about-link,
.h-top .lang-toggle {
  padding: 6px 4px;
  margin: -6px -4px;
}

.v2-back {
  padding: 6px 0;
  margin-bottom: -6px;
}

/* Product loop: pause control and the still shown while paused */
.v2-loop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--primary);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out);
}

.v2-loop-toggle:hover,
.v2-loop-toggle:focus-visible {
  border-color: var(--accent);
}

.v2-loop-toggle svg {
  width: 12px;
  height: 12px;
}

.v2-loop-toggle .i-play,
.v2-demo.is-paused ~ .v2-demo-foot .v2-loop-toggle .i-pause {
  display: none;
}

.v2-demo.is-paused ~ .v2-demo-foot .v2-loop-toggle .i-play {
  display: block;
}

.v2-demo .shot-frame {
  position: relative;
}

.v2-demo-still {
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border-radius: 9px;
  background: #fff;
  object-fit: cover;
  object-position: top center;
  display: none;
}

.v2-demo.is-paused .v2-demo-still {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link,
  .v2-loop-toggle {
    transition: none;
  }
}