@font-face { font-family: "Tokyo Dreams"; src: url("../assets/tokyodreams-webfont.woff2") format("woff2"); font-display: block; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; }

:root {
  --bg: #141416; --panel: #f6f4ef; --card: #ebe8e1;
  --ink: #1a1a1a; --p-gray: #6f6d68; --soft: #aeaba4;
  --line: rgba(26, 26, 26, 0.14);
  --display: "Tokyo Dreams", "Libre Baskerville", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --edge: 8px; --gap: 20px;
  --radius: clamp(30px, 4vw, 60px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scrollbar-width: none; }
html::-webkit-scrollbar, *::-webkit-scrollbar { width: 0; height: 0; display: none; }
html.lenis { scroll-behavior: auto; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ============ Shared: two-box split ============ */
.fn { display: grid; grid-template-columns: minmax(calc(23rem + clamp(1rem, 2vw, 2rem) + clamp(0.5rem, 1vw, 1rem)), 29%) minmax(0, 1fr);   /* left column never narrower than the four tabs on one line; the right one gives way until the tablet layout takes over */ gap: var(--gap); padding: var(--edge); align-items: start; max-width: 1900px; margin: 0 auto; }

.fn-panel {
  position: sticky; top: var(--edge); height: calc(100vh - 2 * var(--edge)); height: calc(100svh - 2 * var(--edge));
  display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
  background: var(--panel); border-radius: var(--radius);
  padding: clamp(1.4rem, 2.2vw, 2.1rem);
}
.fn-back { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--p-gray); transition: color .3s var(--ease); align-self: flex-start; }
.fn-back:hover { color: var(--ink); }
.fn-head { margin-top: clamp(1.2rem, 3.5vh, 2.2rem); }
.fn-title { font-family: var(--display); font-weight: 400; font-size: clamp(2.8rem, 4.4vw, 4rem); line-height: 1; margin: 0 0 0.9rem; }
.fn-tagline { color: var(--p-gray); font-size: 0.92rem; max-width: 34ch; }
.fn-label { display: block; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--p-gray); margin-bottom: 0.6rem; }

.fn-did { margin-top: clamp(1.1rem, 3vh, 1.8rem); padding-top: 1.1rem; border-top: 1px solid var(--line); }
.fn-did li { font-size: 0.9rem; line-height: 1.85; }

.fn-tabs { margin-top: clamp(1rem, 2.6vh, 1.6rem); padding-top: 1.1rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; }
.fn-tabs a { display: flex; align-items: baseline; gap: 0.8rem; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); line-height: 2.1; transition: color .3s var(--ease); }
.fn-tabs a i { font-style: normal; font-variant-numeric: tabular-nums; min-width: 1.4rem; }
.fn-tabs a:hover { color: var(--ink); }
.fn-tabs a.is-active { color: var(--ink); font-weight: 600; }

.fn-foot { margin-top: auto; padding-top: 1rem; display: flex; justify-content: space-between; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--p-gray); }
.fn-foot a:hover { color: var(--ink); }

/* Content typography (hierarchy) */
.fn-eyebrow { display: flex; align-items: center; gap: 0.8rem; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--p-gray); line-height: 1.4; margin: 0 0 1.6rem; }
.fn-eyebrow span { display: inline-grid; place-items: center; min-width: 2.2rem; height: 1.6rem; padding: 0 0.5rem; border: 1px solid var(--line); border-radius: 999px; font-weight: 500; font-variant-numeric: tabular-nums; }
.fn-h { font-family: var(--sans); font-weight: 500; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 1.4rem; }
.fn-h--sub { font-size: clamp(1.4rem, 2vw, 1.8rem); margin-top: 3rem; letter-spacing: 0; }
.cs-p { color: #5b5954; font-size: clamp(1.02rem, 1.25vw, 1.15rem); line-height: 1.7; max-width: 62ch; margin-bottom: 1.1rem; }

.cs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0 0.4rem; }
.cs-stats > div { padding: clamp(1.4rem, 2.4vw, 2rem); background: var(--card); border-radius: 24px; }
.cs-stats strong { display: block; font-weight: 400; font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1; letter-spacing: -0.02em; margin-bottom: 0.8rem; white-space: nowrap; }
.cs-stats p { color: var(--p-gray); font-size: 0.9rem; margin: 0; }
.cs-finds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.4rem; }
.cs-finds li { padding: clamp(1.4rem, 2.4vw, 2rem); background: var(--card); border-radius: 24px; }
.cs-find__num { display: block; margin-bottom: 1.6rem; font-size: 0.8rem; letter-spacing: 0.12em; color: var(--p-gray); }
.cs-find__title { font-family: var(--sans); font-weight: 500; font-size: 1.25rem; line-height: 1.4; margin: 0 0 0.5rem; }
.cs-finds .cs-p, .cs-principles .cs-p { margin-bottom: 0; }
.cs-principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.5rem; }
.cs-principles > div { padding: clamp(1.4rem, 2.4vw, 2rem); background: var(--card); border-radius: 24px; }

.fn-shot { margin: 2.2rem 0 0.4rem; border-radius: clamp(20px, 2.6vw, 36px); display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--card); color: var(--p-gray); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }

.fn-cover { margin: 0; overflow: hidden; background: #cfcabf; }
.fn-cover img { width: 100%; height: 100%; object-fit: cover; display: block; animation: fn-cover 1.8s var(--ease) both; }
@keyframes fn-cover { from { transform: scale(1.18); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.fn-sec { scroll-margin-top: var(--edge); }
@media (prefers-reduced-motion: reduce) { .fn-cover img { animation: none; } }

/* ============ Variant 1 + 2: ONE big right box ============ */
.v1 .fn-main, .v2 .fn-main { background: var(--panel); border-radius: var(--radius); overflow: hidden; }
.v1 .fn-cover, .v2 .fn-cover { height: min(78svh, 820px); border-radius: 0; }
.v1 .fn-sec, .v2 .fn-sec { padding: clamp(2.2rem, 5vw, 4.5rem); border-top: 1px solid var(--line); }
.v1 .fn-cover + .fn-sec, .v2 .fn-cover + .fn-sec { border-top: 0; }

/* ============ Variant 2: context-aware left box ============ */
.fn-now { margin-top: clamp(1.1rem, 3vh, 1.8rem); padding: 1.1rem; background: var(--card); border-radius: 22px; }
.fn-now__row { display: flex; align-items: baseline; gap: 0.5rem; }
.fn-now__num { font-size: 2.6rem; line-height: 1; letter-spacing: -0.02em; font-weight: 400; font-variant-numeric: tabular-nums; }
.fn-now__of { color: var(--p-gray); font-size: 0.9rem; }
.fn-now__name { margin-top: 0.5rem; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.fn-now__sum { margin-top: 0.3rem; color: var(--p-gray); font-size: 0.85rem; line-height: 1.45; min-height: 2.5em; }
.fn-bar { display: block; height: 3px; margin-top: 0.9rem; background: var(--line); border-radius: 3px; overflow: hidden; }
.fn-bar b { display: block; height: 100%; width: 14%; background: var(--ink); border-radius: 3px; transition: width .6s var(--ease); }

/* ============ Variant 3: right side split into cards ============ */
.v3 .fn-main { display: grid; gap: var(--gap); }
.v3 .fn-cover { height: calc(100svh - 2 * var(--edge)); border-radius: var(--radius); }
.v3 .fn-sec { background: var(--panel); border-radius: var(--radius); padding: clamp(2rem, 5vw, 4.5rem); }

/* ============ Tablet / mobile ============
   Single column. The panel keeps title, tagline, section tabs and summary (as on desktop);
   Previous / Next move to the top bar and the landing menu to the bottom (css/case-nav.css). */
@media (max-width: 1023px) {
  .fn { grid-template-columns: 1fr; }
  .fn-panel { position: static; height: auto; overflow: visible; }
  .fn-foot, .fn-now { display: none; }
  .v1 .fn-cover, .v2 .fn-cover, .v3 .fn-cover { height: 60vh; }
}
@media (max-width: 767px) {
  .fn-panel, .fn-main, .v3 .fn-sec, .v3 .fn-cover { border-radius: 30px; }
  .cs-stats, .cs-principles, .cs-finds { grid-template-columns: 1fr; }
}

.v2 .fn-did ul { display: flex; flex-wrap: wrap; gap: 0.1rem 0.9rem; }
.v2 .fn-did li { line-height: 1.7; font-size: 0.85rem; }
.v2 .fn-tagline { font-size: 0.88rem; }
.v2 .fn-tabs a { line-height: 1.9; }


/* Left side sits directly on the page background (no box) */
.fn-panel { background: none; border-radius: 0; padding-left: clamp(1rem, 2vw, 2rem); padding-right: clamp(0.5rem, 1vw, 1rem); }

/* Left side: only two lines — under "Back to work" and above Previous/Next */
.fn-did, .fn-tabs { border-top: 0; }
.fn-back { display: block; width: 100%; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.fn-foot { border-top: 1px solid var(--line); }

/* Left side tweaks */
.fn-title { font-size: clamp(3.4rem, 5.6vw, 5.2rem); }
.fn-tagline { max-width: none; }
.fn-tabs { margin-top: clamp(2.5rem, 9vh, 5rem); }
.fn-tagline { max-width: 40ch; }
.fn-panel { padding-top: 0; padding-bottom: 0; }
.fn-panel { padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); }

/* ============ Type scale (single source of truth) ============ */
:root {
  --fs-label: 0.75rem;                       /* uppercase labels, nav, links */
  --fs-small: 0.9rem;                        /* captions, stat descriptions */
  --fs-body: clamp(1rem, 1.1vw, 1.1rem);     /* paragraphs, tagline */
  --fs-h4: clamp(1.1rem, 1.4vw, 1.25rem);    /* card titles (findings, principles) */
  --fs-h3: clamp(1.4rem, 2vw, 1.8rem);       /* sub-headings */
  --fs-h2: clamp(1.6rem, 2.6vw, 2.3rem);        /* section headings */
  --fs-num: clamp(2.2rem, 3.6vw, 3.2rem);    /* big stat numbers */
}
.fn-tabs a, .fn-eyebrow, .fn-shot, .fn-back, .fn-foot, .fn-label { font-size: var(--fs-label); }
.fn-tagline, .cs-p { font-size: var(--fs-body); }
.cs-stats p { font-size: var(--fs-small); }
.cs-find__num { font-size: var(--fs-label); }
.cs-find__title { font-size: var(--fs-h4); }
.fn-h--sub { font-size: var(--fs-h3); }
.fn-h { font-size: var(--fs-h2); }
.fn-h--sub { font-size: var(--fs-h3); }
.cs-stats strong { font-size: var(--fs-num); }

/* Finora-style tab navigation: horizontal text tabs, underline on active, short summary below */
.fn-tabs { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.4rem; margin-top: clamp(2.5rem, 9vh, 5rem); padding-top: 0; }
.fn-tabs a { position: relative; line-height: 1.6; padding: 0.35rem 0; color: var(--soft); font-weight: 400; }
.fn-tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.fn-tabs a.is-active { color: var(--ink); font-weight: 400; }
.fn-tabs a.is-active::after { transform: scaleX(1); }
/* Summary paragraphs: the landing page's --ink-2 cream, a step brighter than the grey labels */
.fn-sum { margin-top: 1.4rem; color: #cfcabf; font-size: var(--fs-body); line-height: 1.55; max-width: 34ch; min-height: 3.2em; }
.fn-sum { white-space: pre-line; max-width: none; min-height: 0; font-size: var(--fs-small); }
.fn-tagline { max-width: 34ch; }
.fn-sum { max-width: 36ch; }
.fn-tagline { max-width: 40ch; }
.fn-sum { max-width: 44ch; }
@media (max-width: 1023px) {
  .fn-tagline, .fn-sum { max-width: 70ch; }
}
/* Desktop: a long summary scrolls inside its own area (no scrollbar), so it never runs over the Previous / Next line */
@media (min-width: 1024px) {
  .fn-sum { overflow-y: auto; margin-bottom: 1rem; scrollbar-width: none; }
  .fn-sum::-webkit-scrollbar { display: none; }
}
.fn-back { padding-bottom: 1.4rem; }
.fn-head { margin-top: 1.4rem; }

/* Discovery card background image */
.v3 #discovery { position: relative; isolation: isolate; overflow: hidden; background: #dfe5ec; }
.v3 #discovery::before { content: ""; position: absolute; inset: -6px; z-index: -2; background: url("../assets/Emento%20bg4.jpg") center / cover no-repeat; filter: blur(2px) brightness(1.1) saturate(0.9); }
.v3 #discovery::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, 0.35); }
.v3 #discovery .cs-p, .v3 #discovery .fn-eyebrow, .v3 #discovery .cs-stats p, .v3 #discovery .cs-find__num { color: #2b2b29; }
.v3 #discovery .fn-eyebrow span { border-color: rgba(26, 26, 26, 0.3); }

/* Dark page background: left side uses the main page's light text tokens */
.fn-panel { --ink: #f4f1ea; --p-gray: #9c9a95; --soft: #6c6c70; --line: rgba(244, 241, 234, 0.14); color: var(--ink); }

/* Match the main page: display titles are pure white, body copy neutral grey */
.fn-panel { --ink: #ffffff; --p-gray: #9c9a95; --soft: #7b7974; }
.fn-title { color: #ffffff; }
.fn-title { font-size: clamp(2.8rem, 4.6vw, 4.2rem); }
.fn-tagline { font-size: var(--fs-small); }

/* Challenge card is empty: kept only as an anchor for the nav tab and the left text */
.v3 .fn-sec { padding: clamp(2.5rem, 6.5vw, 6rem); }

/* Discovery tiles: light blue frosted glass to match the background */
.v3 #discovery .cs-stats > div, .v3 #discovery .cs-finds li { background: rgba(238, 245, 252, 0.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
.fn-h.fn-h--label { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; margin: 3rem 0 1.4rem; }
.v3 #discovery .fn-h--label { color: #2b2b29; }

/* Discovery text hierarchy: strongest -> softest */
.v3 #discovery .cs-stats strong, .v3 #discovery .cs-find__title { color: #111214; }
.v3 #discovery .cs-p, .v3 #discovery .cs-stats p { color: #565b63; }
.v3 #discovery .cs-find__num { color: #7a818c; }
.v3 #discovery .fn-h--label { color: #3c4148; }

/* Discovery tiles: same glass as the main page's project bars */
.v3 #discovery .cs-stats > div, .v3 #discovery .cs-finds li {
  background: rgba(24, 24, 26, 0.3);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
  color: #fff;
}
.v3 #discovery .cs-stats strong, .v3 #discovery .cs-find__title { color: #ffffff; }
.v3 #discovery .cs-stats p, .v3 #discovery .cs-finds .cs-p { color: rgba(244, 241, 234, 0.78); }
.v3 #discovery .cs-find__num { color: rgba(244, 241, 234, 0.55); }
.v3 #discovery .cs-stats > div, .v3 #discovery .cs-finds li { box-shadow: none; }

/* Lighter glass tint with dark text (readable on the light blue background) */
.v3 #discovery .cs-stats > div, .v3 #discovery .cs-finds li { background: rgba(24, 24, 26, 0.1); color: #111214; }
.v3 #discovery .cs-stats strong, .v3 #discovery .cs-find__title { color: #111214; }
.v3 #discovery .cs-stats p, .v3 #discovery .cs-finds .cs-p { color: #4a4f57; }
.v3 #discovery .cs-find__num { color: #6d7480; }

/* Slightly darker glass with white text */
.v3 #discovery .cs-stats > div, .v3 #discovery .cs-finds li { background: rgba(24, 24, 26, 0.22); color: #fff; }
.v3 #discovery .cs-stats strong, .v3 #discovery .cs-find__title { color: #ffffff; }
.v3 #discovery .cs-stats p, .v3 #discovery .cs-finds .cs-p { color: rgba(255, 255, 255, 0.85); }
.v3 #discovery .cs-find__num { color: rgba(255, 255, 255, 0.6); }
.v3 #discovery .cs-stats > div, .v3 #discovery .cs-finds li { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); }
.v3 #discovery .cs-stats > div, .v3 #discovery .cs-finds li { box-shadow: 0 6px 18px rgba(96, 128, 172, 0.22); }
.v3 #discovery .cs-stats > div, .v3 #discovery .cs-finds li { box-shadow: 0 10px 30px rgba(96, 128, 172, 0.26); }

/* Discovery text hierarchy (on glass): title > body > meta */
.v3 #discovery .cs-stats strong, .v3 #discovery .cs-find__title { color: #ffffff; }
.v3 #discovery .cs-find__title { font-weight: 600; }
.v3 #discovery .cs-stats p, .v3 #discovery .cs-finds .cs-p { color: rgba(255, 255, 255, 0.72); }
.v3 #discovery .cs-find__num { color: rgba(255, 255, 255, 0.5); }
.v3 #discovery .fn-h--label { color: #1f2430; }

/* ===== Glassmorphism, sky-blue (reference look) ===== */
.v3 #discovery::after { background: linear-gradient(160deg, rgba(116, 190, 236, 0.55) 0%, rgba(190, 226, 248, 0.35) 55%, rgba(255, 255, 255, 0.35) 100%); }
.v3 #discovery .cs-stats > div, .v3 #discovery .cs-finds li {
  background: linear-gradient(140deg, rgba(74, 128, 184, 0.62) 0%, rgba(112, 156, 200, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 28px;
  -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 16px 36px rgba(60, 116, 176, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.v3 #discovery .cs-stats strong, .v3 #discovery .cs-find__title { color: #ffffff; }
.v3 #discovery .cs-stats p, .v3 #discovery .cs-finds .cs-p { color: rgba(255, 255, 255, 0.88); }
.v3 #discovery .cs-find__num { color: rgba(255, 255, 255, 0.65); }
.v3 #discovery .fn-h--label { color: #16324f; }
.v3 #discovery .fn-h--label { color: #ffffff; }

/* ===== Type scale aligned with the main page ===== */
:root {
  --fs-label: 0.75rem;                        /* main: --fs-meta */
  --fs-small: 0.92rem;                        /* main: .proj__desc */
  --fs-body: clamp(1rem, 1.15vw, 1.2rem);     /* main: .about__text */
  --fs-h4: 1.3rem;                            /* main: .svc-strip__title */
  --fs-h3: clamp(1.6rem, 2.6vw, 2.4rem);      /* main: .proj__title */
}
.cs-p { line-height: 1.75; }
.fn-h--sub { font-size: var(--fs-h3); }
.fn-h.fn-h--label { font-size: var(--fs-label); }
.cs-finds .cs-p, .cs-principles .cs-p { font-size: var(--fs-small); line-height: 1.6; }

/* Wider side padding so the content breathes */
.v3 .fn-sec:not(.fn-sec--anchor) { padding-left: clamp(2.5rem, 9vw, 8rem); padding-right: clamp(2.5rem, 9vw, 8rem); }
@media (max-width: 767px) { .v3 .fn-sec:not(.fn-sec--anchor) { padding-left: 1.5rem; padding-right: 1.5rem; } }

/* ===== Rotating testimonials (glass) ===== */
.cs-quotes { position: relative; display: grid; margin: 0 0 1.4rem; }
.cs-quote {
  grid-area: 1 / 1; margin: 0; padding: clamp(1.6rem, 3vw, 2.4rem);
  background: linear-gradient(140deg, rgba(74, 128, 184, 0.62) 0%, rgba(112, 156, 200, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 28px;
  -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 16px 36px rgba(60, 116, 176, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #fff; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), visibility .7s;
}
.cs-quote.is-active { opacity: 1; visibility: visible; transform: none; }
.cs-quote blockquote { margin: 0 0 1.6rem; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.45; font-weight: 400; color: #fff; }
.cs-quote figcaption { display: flex; align-items: center; gap: 0.9rem; }
.cs-quote__av { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(255, 255, 255, 0.28); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; }
.cs-quote__who { display: grid; line-height: 1.35; }
.cs-quote__who b { font-weight: 600; font-size: var(--fs-small); color: #fff; }
.cs-quote__who i { font-style: normal; font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.cs-quotes__dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; grid-area: 2 / 1; }
.cs-quotes__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: width .4s var(--ease), background .3s; }
.cs-quotes__dots button.is-active { width: 22px; border-radius: 8px; background: #fff; }

/* Discovery top: testimonials left, the three stats stacked on the right */
.cs-disc-top { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; margin: 0 0 1rem; }
.cs-disc-top .cs-quotes { margin: 0; grid-template-rows: 1fr auto; }
.cs-disc-top .cs-quote { display: flex; flex-direction: column; justify-content: space-between; }
.cs-disc-top .cs-stats { grid-template-columns: 1fr; gap: 1rem; margin: 0; }
@media (max-width: 767px) { .cs-disc-top { grid-template-columns: 1fr; } }
.cs-disc-top .cs-stats > div { padding: 1.1rem 1.4rem; }
.cs-disc-top .cs-stats strong { font-size: clamp(1.8rem, 2.6vw, 2.4rem); margin-bottom: 0.3rem; }

/* ===== Light frosted glass, dark text, soft violet accent (new reference) ===== */
.v3 #discovery .cs-quote, .v3 #discovery .cs-stats > div, .v3 #discovery .cs-finds li {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.22) 100%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 14px 34px rgba(76, 120, 180, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: #1b2540;
}
.v3 #discovery .cs-quote blockquote, .v3 #discovery .cs-stats strong, .v3 #discovery .cs-find__title, .v3 #discovery .cs-quote__who b { color: #1b2540; }
.v3 #discovery .cs-stats p, .v3 #discovery .cs-finds .cs-p { color: #4a5470; }
.v3 #discovery .cs-quote__who i, .v3 #discovery .cs-find__num { color: #7c86a6; }
.v3 #discovery .cs-quote__av { background: rgba(122, 114, 214, 0.18); color: #6a62c8; }
.v3 #discovery .cs-quotes__dots button { background: rgba(27, 37, 64, 0.25); }
.v3 #discovery .cs-quotes__dots button.is-active { background: #7a72d6; }
.v3 #discovery .fn-h--label { color: #1b2540; }
.v3 #discovery .cs-quote, .v3 #discovery .cs-stats > div, .v3 #discovery .cs-finds li { border-color: rgba(255, 255, 255, 0.35); }

/* Stats without boxes: arrow-led rows */
.v3 #discovery .cs-disc-top .cs-stats { align-content: center; gap: 0; }
.v3 #discovery .cs-disc-top .cs-stats > div {
  background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: 0.9rem; align-items: start;
  padding: 1.05rem 0; border-bottom: 1px solid rgba(27, 37, 64, 0.16);
}
.v3 #discovery .cs-disc-top .cs-stats > div:last-child { border-bottom: 0; }
.v3 #discovery .cs-disc-top .cs-stats > div::before {
  content: "→"; grid-row: 1 / span 2; display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem;
  border-radius: 50%; background: rgba(122, 114, 214, 0.16); color: #6a62c8; font-size: 1rem; line-height: 1;
}
.v3 #discovery .cs-disc-top .cs-stats strong { grid-column: 2; margin: 0 0 0.15rem; }
.v3 #discovery .cs-disc-top .cs-stats p { grid-column: 2; }
.v3 #discovery .cs-disc-top .cs-stats strong { font-size: clamp(1.5rem, 2.1vw, 1.9rem); }
.v3 #discovery .cs-disc-top .cs-stats > div::before {
  content: "\2197\FE0E"; background: none; border: 1px solid rgba(27, 37, 64, 0.3); color: #1b2540; font-size: 0.95rem;
}
.v3 #discovery .cs-disc-top .cs-stats > div::before { content: "→"; }
.v3 #discovery .cs-disc-top .cs-stats > div::before {
  content: "→"; background: rgba(122, 114, 214, 0.16); border: 0; color: #6a62c8; font-size: 1rem;
}
.v3 #discovery .cs-disc-top .cs-stats > div::before {
  content: ""; display: block; font-size: 0;
  background: rgba(122, 114, 214, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a62c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center / 46% no-repeat;
}

/* Accent: soft cornflower blue (was violet) */
.v3 #discovery .cs-disc-top .cs-stats > div::before {
  background: rgba(74, 134, 200, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d78bc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center / 46% no-repeat;
}
.v3 #discovery .cs-quote__av { background: rgba(74, 134, 200, 0.2); color: #3d78bc; }
.v3 #discovery .cs-quotes__dots button.is-active { background: #4a86c8; }
.fn-h.fn-h--label { margin-top: 7rem; }

/* ===== Strategy card: Mento bg1 + light glass tiles (same treatment as Discovery) ===== */
.v3 #strategy { position: relative; isolation: isolate; overflow: hidden; background: #dfe5ec; }
.v3 #strategy::before { content: ""; position: absolute; inset: -30px; z-index: -2; background: url("../assets/Mento%20bg1.jpg") 50% 30% / cover no-repeat; filter: blur(14px) brightness(1.1) saturate(0.9); }
.v3 #strategy::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(116, 190, 236, 0.55) 0%, rgba(190, 226, 248, 0.35) 55%, rgba(255, 255, 255, 0.35) 100%); }
.v3 #strategy .cs-principles > div {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.22) 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 14px 34px rgba(76, 120, 180, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  border-radius: 28px;
}
.v3 #strategy .fn-eyebrow, .v3 #strategy .fn-h, .v3 #strategy .cs-find__title { color: #1b2540; }
.v3 #strategy .cs-p { color: #4a5470; }
.v3 #strategy .cs-principles { margin-top: 0; }
.v3 #strategy .cs-find__title { font-weight: 600; font-size: var(--fs-h4); }
.v3 #strategy .cs-principles { gap: 1rem; }
.v3 #strategy .cs-principles > div { padding: clamp(1.4rem, 2.4vw, 2rem); }

/* Strategy principles: no boxes, tick icon before each */
.v3 #strategy .cs-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.2rem) clamp(2rem, 5vw, 4rem); }
.v3 #strategy .cs-principles > div {
  background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 0; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: 1rem; align-items: start;
}
.v3 #strategy .cs-principles > div::before {
  content: ""; grid-row: 1 / span 2; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: rgba(74, 134, 200, 0.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d78bc' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 52% no-repeat;
}
.v3 #strategy .cs-principles .cs-find__title { grid-column: 2; margin: 0.1rem 0 0.4rem; }
.v3 #strategy .cs-principles .cs-p { grid-column: 2; }
@media (max-width: 767px) { .v3 #strategy .cs-principles { grid-template-columns: 1fr; } }

/* Strategy principles as a single-column list, smaller titles */
.v3 #strategy .cs-principles { grid-template-columns: 1fr; gap: 0; }
.v3 #strategy .cs-principles > div { padding: 1.3rem 0; border-bottom: 1px solid rgba(27, 37, 64, 0.14); }
.v3 #strategy .cs-principles > div:first-child { padding-top: 0; }
.v3 #strategy .cs-principles > div:last-child { border-bottom: 0; padding-bottom: 0; }
.v3 #strategy .cs-principles .cs-find__title { font-size: 1.05rem; margin: 0.15rem 0 0.3rem; }

/* Strategy principles: four glass boxes in one row */
.v3 #strategy:not(.fn-sec--anchor) { padding-left: clamp(1.4rem, 3vw, 2.6rem); padding-right: clamp(1.4rem, 3vw, 2.6rem); }
.v3 #strategy .cs-principles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.v3 #strategy .cs-principles > div {
  display: block; padding: 1.1rem 1rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.22) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 14px 34px rgba(76, 120, 180, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.v3 #strategy .cs-principles > div:first-child, .v3 #strategy .cs-principles > div:last-child { padding: 1.1rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.v3 #strategy .cs-principles > div::before { display: none; }
.v3 #strategy .cs-principles .cs-find__title { font-size: 1.05rem; margin: 0 0 0.5rem; width: 75%; }
.v3 #strategy .cs-principles .cs-p { font-size: 0.85rem; line-height: 1.5; max-width: 42ch; }
@media (max-width: 1023px) { .v3 #strategy .cs-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .v3 #strategy .cs-principles { grid-template-columns: 1fr; } }

/* All cards share Discovery's padding; principles wrap 2-up or stack 1-up, never an odd 3/4-across squeeze */
.v3 #strategy:not(.fn-sec--anchor) { padding-left: clamp(2.5rem, 9vw, 8rem); padding-right: clamp(2.5rem, 9vw, 8rem); }
.v3 #strategy .cs-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); container-type: inline-size; container-name: principles; }
@container principles (max-width: 532px) {
  .v3 #strategy .cs-principles { grid-template-columns: 1fr; }
}
@media (max-width: 767px) { .v3 #strategy:not(.fn-sec--anchor) { padding-left: 1.5rem; padding-right: 1.5rem; } .v3 #strategy .cs-principles { grid-template-columns: 1fr; } }

/* Tick icon at the top of each principle box */
.v3 #strategy .cs-principles > div::before {
  display: block; content: ""; width: 2rem; height: 2rem; margin-bottom: 0.9rem; border-radius: 50%;
  background: rgba(74, 134, 200, 0.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d78bc' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 52% no-repeat;
}
.v3 #strategy .fn-h--label { margin-top: 0; margin-bottom: 1.4rem; color: #ffffff; }
.v3 #strategy .fn-h--label { color: #1b2540; }

/* Different icon per principle (replaces the tick) */
.v3 #strategy .cs-principles > div:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d78bc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5.2c0 4.4-2.9 7.9-7 9.8-4.1-1.9-7-5.4-7-9.8V6z'/%3E%3Cpath d='M9 12l2.2 2.2L15.2 10'/%3E%3C/svg%3E"); }
.v3 #strategy .cs-principles > div:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d78bc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='12' cy='12' r='0.8'/%3E%3C/svg%3E"); }
.v3 #strategy .cs-principles > div:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d78bc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5z'/%3E%3Cpath d='M3 12.5l9 5 9-5'/%3E%3Cpath d='M3 17l9 5 9-5' opacity='0.5'/%3E%3C/svg%3E"); }
.v3 #strategy .cs-principles > div:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d78bc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.6-5.9'/%3E%3Cpath d='M20 4.5v4.5h-4.5'/%3E%3C/svg%3E"); }

/* Left-aligned layout with the icon above the title */
.v3 #strategy .cs-principles > div {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
}
.v3 #strategy .cs-principles > div::before {
  content: ""; width: 2.6rem; height: 2.6rem; margin: 0 0 0.9rem; border-radius: 50%;
  background-color: rgba(74, 134, 200, 0.2); background-size: 52%; background-position: center; background-repeat: no-repeat;
}

/* Teacher user flow image under the principles, using the card's full width */
.fn-flow { margin: 2.4rem calc(-1 * clamp(2.5rem, 9vw, 8rem) + 1.2rem) 0; }
.fn-flow img { display: block; width: 100%; height: auto; }
@media (max-width: 767px) { .fn-flow { margin: 2rem -0.5rem 0; } }
.fn-flow { margin: 2.4rem 0 0; }
@media (max-width: 767px) { .fn-flow { margin: 2rem 0 0; } }
.fn-flow { margin-left: -3.5rem; margin-right: -3.5rem; }
@media (max-width: 767px) { .fn-flow { margin-left: 0; margin-right: 0; } }
.fn-flow { margin-left: calc(-1 * min(6.5rem, clamp(2.5rem, 9vw, 8rem) - 1rem)); margin-right: calc(-1 * min(6.5rem, clamp(2.5rem, 9vw, 8rem) - 1rem)); }
@media (max-width: 767px) { .fn-flow { margin-left: 0; margin-right: 0; } }
.fn-flow { margin-left: 0; margin-right: 0; }
.fn-flow { margin-top: 8.5rem; }
@media (max-width: 767px) { .fn-flow { margin-top: 4rem; } }

/* Icons: cream background, brown details */
.v3 #discovery .cs-disc-top .cs-stats > div::before {
  background: #EADAC2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B2F1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center / 46% no-repeat;
}
.v3 #discovery .cs-quote__av { background: #EADAC2; color: #3B2F1E; }
.v3 #discovery .cs-quotes__dots button { background: rgba(59, 47, 30, 0.22); }
.v3 #discovery .cs-quotes__dots button.is-active { background: #EADAC2; box-shadow: 0 0 0 1px rgba(59, 47, 30, 0.35); }

/* Testimonial photos */
.cs-quote__av { width: 3.2rem; height: 3.2rem; overflow: hidden; }
.cs-quote__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3 #discovery .cs-quotes__dots button { background: rgba(27, 37, 64, 0.25); box-shadow: none; }
.v3 #discovery .cs-quotes__dots button.is-active { background: #4a86c8; box-shadow: none; }
.cs-quote__av img { transform: scale(1.5); transform-origin: 50% 36%; }

/* Cover: mockup image centered on the background, full viewport height */
.v3 .fn-cover { position: relative; }
.v3 .fn-cover .fn-cover__mock {
  position: absolute; left: 50%; top: 50%; width: 76%; height: auto; max-height: 76%;
  transform: translate(-50%, -50%); object-fit: contain; animation: none;
  filter: drop-shadow(0 14px 34px rgba(30, 50, 80, 0.16)) drop-shadow(0 4px 10px rgba(30, 50, 80, 0.1));
}
.v3 #discovery .fn-h--first { margin-top: 0; margin-bottom: 1.4rem; }

/* Elegant testimonial transition: soft crossfade with blur, gentle rise, staggered inner content */
.cs-quote { transform: translateY(16px) scale(0.985); filter: blur(6px); transition: opacity 1.1s var(--ease), transform 1.3s var(--ease), filter 1.1s var(--ease), visibility 1.1s; }
.cs-quote.is-active { transform: none; filter: blur(0); }
.cs-quote.is-leaving { transform: translateY(-14px) scale(0.99); filter: blur(6px); }
.cs-quote blockquote, .cs-quote figcaption { opacity: 0; transform: translateY(10px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.cs-quote.is-active blockquote { opacity: 1; transform: none; transition-delay: .18s; }
.cs-quote.is-active figcaption { opacity: 1; transform: none; transition-delay: .34s; }
@media (prefers-reduced-motion: reduce) { .cs-quote, .cs-quote blockquote, .cs-quote figcaption { transition: opacity .3s; filter: none; transform: none; } }

/* Blur the background photo behind the mockup */

/* Design card: bg5 background, same glass treatment as Discovery */
.v3 #design { background: #A0CBE8; }
.v3 #design .fn-eyebrow, .v3 #design .fn-h { color: #1b2540; }
.v3 #design .cs-p { color: #4a5470; }
.v3 #design .fn-shot { background: linear-gradient(145deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.22) 100%); border: 1px solid rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); box-shadow: 0 14px 34px rgba(76, 120, 180, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7); color: #4a5470; }

/* All text inside right-side cards uses Outfit */
.fn-main { font-family: "Outfit", var(--sans); }

/* User Groups: three cards (glass, matches Discovery tiles) */
.v3 #discovery .cs-users { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 0 0 3rem; container-type: inline-size; container-name: user-cards; }
@container user-cards (min-width: 456px) and (max-width: 691.98px) {
  .v3 #discovery .cs-users__card:last-child { grid-column: 1 / -1; }
}
.v3 #discovery .cs-users__card {
  position: relative;
  padding: 1rem 1.1rem; border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.22) 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 14px 34px rgba(76, 120, 180, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 1.8rem 1.3rem;
}
.v3 #discovery .cs-users__icon { margin: 0 0 0.8rem; width: 5rem; height: 5rem; }
.v3 #discovery .cs-users__body .cs-users__tag { position: absolute; top: 0.9rem; right: 0.9rem; margin: 0; }
.v3 #discovery .cs-users__body { display: flex; flex-direction: column; align-items: center; }
.v3 #discovery .cs-users__body { min-width: 0; }
.v3 #discovery .cs-users__tag {
  display: inline-block; padding: 0.2em 0.55em; border-radius: 999px;
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  background: rgba(74, 134, 200, 0.12); color: #5c8bc4;
}
.v3 #discovery .cs-users__tag--secondary { background: rgba(59, 47, 30, 0.1); color: #8a7658; }
@media (max-width: 767px) { .v3 #discovery .cs-users { grid-template-columns: 1fr; } .v3 #discovery .cs-users__card:last-child { grid-column: auto; } }

/* User Groups: role icons, matching the tutoring-platform's onboarding icon style */
.v3 #discovery .cs-users__icon {
  display: inline-grid; place-items: center; flex: none;
  border-radius: 50%; background: rgba(74, 134, 200, 0.18);
}
.v3 #discovery .cs-users__role { display: block; font-weight: 600; font-size: 1.35rem; color: #1b2540; line-height: 1.3; }
.v3 #discovery .cs-users__card .cs-p { width: 100%; margin: 0.4rem 0 0; font-size: 0.98rem; line-height: 1.5; color: #5c6680; }
.v3 #discovery .cs-users__icon svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: #3d78bc; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.v3 #discovery .cs-users__icon--secondary { background: rgba(59, 47, 30, 0.14); }
.v3 #discovery .cs-users__icon--secondary svg { stroke: #6b5738; }
.v3 #discovery .cs-users__icon--avatar { background: none; padding: 0; }
.v3 #discovery .cs-users__icon--avatar img { width: 100%; height: 100%; border-radius: 0; }

/* Different background per avatar circle */
.v3 #discovery .cs-users__icon--avatar { border-radius: 0; overflow: visible; }
.v3 #discovery .cs-users__icon--avatar { border-radius: 50%; overflow: hidden; }
.v3 #discovery .cs-users__icon--avatar img { border-radius: 50%; }

/* User Groups: clearer hierarchy — avatar + name + role in a header row, tag pinned right, description below */

/* Key Findings: plain list rows, no card boxes (kept separate from the Discovery glass-tile system) */
.v3 #discovery .cs-finds {
  display: block; grid-template-columns: none; margin-top: 0.5rem;
}
.v3 #discovery .cs-finds li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0 2rem; align-items: start;
  padding: 1.4rem 0; margin: 0; border-radius: 0;
  background: none !important; border: 0; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-top: 1px solid rgba(27, 37, 64, 0.14);
}
.v3 #discovery .cs-finds li:last-child { border-bottom: 1px solid rgba(27, 37, 64, 0.14); }
.v3 #discovery .cs-finds .cs-find__left { display: flex; flex-direction: column; gap: 0.1rem; }
.v3 #discovery .cs-finds .cs-find__num { color: #7c86a6; margin-bottom: 0; }
.v3 #discovery .cs-finds .cs-find__title { color: #1b2540; margin: 0; }
.v3 #discovery .cs-finds .cs-p { color: #4a5470 !important; margin: 0; }
@media (max-width: 767px) {
  .v3 #discovery .cs-finds li { grid-template-columns: 1fr; gap: 0.6rem 0; align-items: start; }
}

/* ===== Design section: Emento design system (HTML headings + exported component images) =====
   Images come from tutoring-platform/design-system.html?shot=<name>; re-export them when the product changes. */
.v3 #design { background: #A0CBE8; }
.v3 #design .fn-eyebrow, .v3 #design .fn-h, .v3 #design .cs-find__title { color: #1b2540; }
.v3 #design .cs-p { color: #4a5470; }
.ds { display: flex; flex-direction: column; gap: clamp(4.5rem, 9vw, 8rem); margin-top: 1rem; }
.ds-group { display: flex; flex-direction: column; gap: 2.6rem; }
@media (min-width: 1024px) { .ds-group { gap: 4rem; } }
.ds-group__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 2rem; align-items: end; padding-bottom: 1.4rem; border-bottom: 1px solid rgba(27, 37, 64, 0.15); }
.ds-group__head .fn-h--sub { margin: 0; font-size: 1.875rem; }
.ds-group__head .cs-p { margin: 0; max-width: none; font-size: 0.9rem; line-height: 1.65; }
@media (min-width: 1024px) { .ds-group__head .cs-p { max-width: 21rem; justify-self: end; } }
.ds-fig { margin: 0; display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.ds-cap { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #4a5470; padding-left: 0.25rem; }
.ds-fig img, .ds-step img { display: block; width: 100%; height: auto; }
.ds-fig video { display: block; width: 100%; height: auto; border-radius: 16px; }
.ds-row { display: grid; gap: 1.25rem; align-items: start; }
.ds-row--type { grid-template-columns: 420fr 808fr; }
.ds-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.75rem; }
.ds-row--cards { grid-template-columns: 330fr 340fr 538fr; }
.ds-row--1 { grid-template-columns: 1fr; }
.ds-col { display: flex; flex-direction: column; gap: 1.75rem; min-width: 0; }
.ds-step { display: flex; flex-direction: column; min-width: 0; padding: 1.5rem; border-radius: 22px; background: rgba(255, 255, 255, 0.42); border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0 10px 30px rgba(27, 37, 64, 0.06); }
.ds-step img { border-radius: 14px; }
.ds-step__no { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: #1b2540; color: #fff; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.9rem; }
.ds-step .cs-find__title { margin: 0 0 0.4rem; }
.ds-step .cs-p { font-size: var(--fs-small); line-height: 1.6; margin-bottom: 1.2rem; }
.ds-step img { margin-top: auto; }
@media (max-width: 1023px) {
  .ds-group__head { grid-template-columns: 1fr; gap: 0.75rem; }
  .ds-row--type, .ds-row--cards { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .ds-row--2 { grid-template-columns: 1fr; }
}
@media (max-width: 1439px) {
  .ds-row--3 { grid-template-columns: 1fr; }
}
.ds-row > .ds-step { align-self: stretch; }

/* ============ Navigation transition: sections load immediately, only the summary text cross-fades ============ */
.fn-sum { transition: opacity .32s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .fn-sum { transition: none; }
}

/* ============ Tablet / mobile: section tabs sit right under the tagline, a little tighter than desktop ============ */
@media (max-width: 1023px) { .fn-tabs { margin-top: 2.5rem; } }
@media (max-width: 767px) { .fn-tabs { margin-top: 2rem; gap: 0.35rem 0.9rem; } .fn-tabs a { letter-spacing: 0.1em; } }   /* keeps the four tabs on one line at 375px */

/* ============ Tablet / mobile: the user-flow diagrams open enlarged on tap (js/case-nav.js) ============
   A small round badge in the corner tells you they can be tapped. */
@media (max-width: 1023px) {
  .fn-flow { position: relative; }
  .fn-flow img { cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
  .fn-flow::after {
    content: ""; position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%;
    background: rgba(20, 20, 22, 0.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 20px no-repeat;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    pointer-events: none;
  }
}