@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap);
/* ============================================================
   The Udai Pareek Project — design system + component styles
   Ported from the source artifact. Injected into the Webflow
   Designer via app/globals.ts (library.globals in webflow.json).
   Typography + brand cues adapted from springworks.in/about-us.
   ============================================================ */

:host {
  color-scheme: light;
  --ink: #1b1b1b; --body: #333333; --navy: #153a51; --slate: #546285;
  --blue: #1863dc; --sky: #39a5f5; --paper: #ffffff; --mist: #f4f4f4;
  --line: #e6e9ef; --serif-accent: Georgia, "Times New Roman", serif;
  --indigo: #3d57db; --indigo-dark: #2f46c4;
  --display: "Poppins", "Segoe UI", -apple-system, sans-serif;
  /* draftv1 redesign accents */
  --lav: #ccccf0; --azure: #309cf0; --azure-dark: #1e86dd;
  --mint: #9ce4cc; --green-frame: #18c084;
  --coral: #fa645a; --coral-dark: #ef4d43; --pink: #fbcccc;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
  font-size: 16px; line-height: 1.65; color: var(--body); background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); line-height: 1.25; letter-spacing: -0.01em; }
a { color: var(--blue); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 24px; }
.site-nav { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 50; }
.site-nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { font-weight: 700; font-size: 17px; color: var(--navy); letter-spacing: -0.01em; background: none; border: 0; font-family: inherit; cursor: pointer; }
.brand:hover { text-decoration: none; }
.brand .brand-mark { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--sky); margin-right: 9px; transform: rotate(45deg); }
.nav-links { display: flex; gap: 26px; }
.nav-links a, .nav-links button { background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 500; color: var(--body); }
.nav-links a.active, .nav-links a:hover, .nav-links button.active, .nav-links button:hover { color: var(--blue); text-decoration: none; }
.hero { padding: 66px 0 54px; position: relative; overflow: hidden; }
.hero .kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); margin-bottom: 18px; }
.hero h1 { font-size: clamp(33px, 5.4vw, 52px); font-weight: 600; line-height: 1.12; letter-spacing: -0.025em; max-width: 760px; margin-bottom: 8px; }
.hero h1 .accent { color: var(--ink); background: var(--lav); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 2px 10px; border-radius: 6px; }
.hero .dates { font-family: var(--serif-accent); font-style: italic; color: var(--slate); font-size: 19px; margin-bottom: 24px; }
.hero .lede { font-size: 18px; max-width: 640px; color: var(--body); margin-bottom: 14px; }
.hero-geo { position: absolute; right: -60px; top: 40px; width: 280px; height: 280px; opacity: 0.55; pointer-events: none; }
@media (max-width: 860px) { .hero-geo { display: none; } }
.btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 600; font-size: 15.5px; padding: 12px 24px; border-radius: 9px; background: var(--azure); color: #fff; border: none; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; }
.btn:hover { background: var(--azure-dark); text-decoration: none; transform: translateY(-1px); }
.btn.ghost { background: #fff; color: var(--navy); border: 1.5px solid var(--azure); }
.btn.ghost:hover { background: var(--azure); color: #fff; }
.btn.coral { background: var(--coral); }
.btn.coral:hover { background: var(--coral-dark); }
.btn .btn-arrow { font-size: 17px; line-height: 1; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.section { padding: 50px 0; }
.section.tint { background: var(--mist); }
.section h2 { font-size: clamp(24px, 3.6vw, 30px); font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.section .sub { color: var(--slate); max-width: 640px; margin-bottom: 32px; font-size: 16.5px; }
.rule { width: 44px; height: 4px; border-radius: 2px; background: var(--sky); margin: 0 0 22px; }
.card-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 26px 24px; display: flex; flex-direction: column; }
.tint .card { border-color: #e0e4ea; }
.card h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.card p { font-size: 15px; color: var(--body); }
.card .card-tag { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sky); margin-bottom: 10px; }
.card .card-foot { margin-top: auto; padding-top: 14px; font-size: 14.5px; }
.glossary-cat { padding: 42px 0 14px; }
.glossary-cat h2 { font-size: 25px; color: var(--navy); margin-bottom: 6px; }
.glossary-cat .cat-note { color: var(--slate); margin-bottom: 26px; max-width: 640px; }
.gloss-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-bottom: 30px; }
.gloss-card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 24px 22px; border-top: 3px solid var(--sky); }
.gloss-card.fw { border-top-color: var(--navy); }
.gloss-card.idea { border-top-color: var(--slate); }
.gloss-card h3 { font-size: 17.5px; font-weight: 600; margin-bottom: 9px; }
.gloss-card p { font-size: 14.8px; }
.gloss-card p + p { margin-top: 8px; }
.formula-box { font-family: var(--serif-accent); font-style: italic; background: var(--mist); border-radius: 8px; padding: 10px 14px; margin: 10px 0; font-size: 15px; color: var(--navy); }
.quiz-list { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.quiz-shell { max-width: 660px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 34px 32px; }
.quiz-shell .quiz-kicker { font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky); margin-bottom: 8px; }
.quiz-shell h2 { font-size: 24px; color: var(--ink); margin-bottom: 4px; }
.quiz-progress { height: 5px; background: var(--mist); border-radius: 3px; margin: 20px 0 26px; overflow: hidden; }
.quiz-progress span { display: block; height: 100%; background: var(--sky); border-radius: 3px; transition: width 0.25s ease; }
.quiz-q { font-size: 18.5px; font-weight: 600; color: var(--ink); margin-bottom: 20px; }
.quiz-opts { display: grid; gap: 11px; }
.quiz-opt { text-align: left; font-family: inherit; font-size: 15.3px; padding: 13px 17px; border-radius: 9px; cursor: pointer; background: var(--paper); border: 1.5px solid var(--line); color: var(--body); line-height: 1.5; transition: border-color .12s, background .12s; }
.quiz-opt:hover { border-color: var(--sky); background: #f3faff; }
.quiz-opt.correct { border-color: #2e9e4f; background: #eefaf1; }
.quiz-opt.incorrect { border-color: #d64545; background: #fdf0f0; }
.quiz-opt:disabled { cursor: default; }
.quiz-feedback { margin-top: 16px; font-size: 14.5px; color: var(--slate); }
.quiz-next { margin-top: 20px; }
.quiz-result h3 { font-size: 22px; color: var(--navy); margin-bottom: 14px; }
.quiz-result .result-big { font-size: 26px; font-weight: 700; color: var(--ink); margin: 6px 0 14px; }
.quiz-result p { margin-bottom: 12px; font-size: 15.5px; }
.result-bars { margin: 18px 0; display: grid; gap: 9px; }
.result-bar { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 12px; font-size: 14px; }
.result-bar .bar-track { height: 9px; background: var(--mist); border-radius: 5px; overflow: hidden; }
.result-bar .bar-fill { height: 100%; background: var(--sky); border-radius: 5px; }
.result-bar.low .bar-fill { background: var(--slate); }
.framework-note { margin-top: 22px; padding: 15px 17px; background: var(--mist); border-radius: 9px; font-size: 14.3px; color: var(--body); }
.quiz-back { margin-top: 20px; font-size: 14.5px; }
.quiz-disclaimer { font-size: 13px; color: var(--slate); font-style: italic; margin-top: 14px; }
.site-footer { border-top: 1px solid var(--line); background: var(--mist); padding: 40px 0 34px; margin-top: 60px; }
.site-footer h4 { font-size: 15px; color: var(--navy); margin-bottom: 8px; }
.site-footer p { font-size: 14px; color: var(--body); max-width: 640px; }
.site-footer .credit { margin-top: 18px; font-size: 13px; color: var(--slate); }
.timeline { margin-top: 8px; display: grid; gap: 14px; }
.timeline .t-item { display: grid; grid-template-columns: 84px 1fr; gap: 16px; }
.timeline .t-year { font-weight: 600; color: var(--navy); font-size: 15.5px; }
.timeline .t-body { font-size: 15px; }

.gloss-card { cursor: pointer; }
.gloss-card h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.gloss-card h3::after { content: "+"; color: var(--sky); font-weight: 600; font-size: 19px; transition: transform 0.25s ease; flex-shrink: 0; line-height: 1; }
.gloss-card:hover h3::after, .gloss-card.open h3::after, .gloss-card:focus-within h3::after { transform: rotate(45deg); }
.gloss-card .gloss-body { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height 0.45s ease, opacity 0.35s ease, margin-top 0.3s ease; }
.gloss-card:hover .gloss-body, .gloss-card.open .gloss-body, .gloss-card:focus-within .gloss-body { max-height: 900px; opacity: 1; margin-top: 10px; }
.site-footer .address { margin-top: 6px; font-size: 13px; color: var(--slate); }
.foot-logos { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 20px; }
.foot-logos a { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 9px 16px; display: flex; align-items: center; }
.foot-logos img { height: 24px; display: block; }

.about-grid { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: start; }
.about-grid figure { margin: 0; }
.about-grid img { width: 100%; border-radius: 12px; border: 1px solid var(--line); display: block; }
.about-grid figcaption { font-size: 13px; color: var(--slate); margin-top: 8px; line-height: 1.5; }
.about-text p { margin-bottom: 13px; font-size: 15.8px; }
.about-quote { border-left: 3px solid var(--sky); padding: 4px 0 4px 18px; font-family: var(--serif-accent); font-style: italic; font-size: 16.5px; color: var(--navy); margin: 20px 0 8px; }
.about-quote-attr { font-size: 13.5px; color: var(--slate); margin-top: 6px; font-style: normal; font-family: inherit; }
.award-facts { display: grid; gap: 10px; margin: 16px 0; }
.award-facts .fact { display: grid; grid-template-columns: 14px 1fr; gap: 10px; font-size: 14.8px; }
.award-facts .fact::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--sky); transform: rotate(45deg); margin-top: 7px; }
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; } .about-grid figure { max-width: 340px; } }

/* ===== draftv1 redesign: wavy underlines, framed photos, hero grid, sticker cards ===== */

/* Wavy squiggle underline under section headings (replaces the solid .rule bar) */
.rule { display: none; }
.section h2, .glossary-cat h2 {
  display: inline-block; padding-bottom: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2746%27 height=%2711%27 viewBox=%270 0 46 11%27%3E%3Cpath d=%27M1 7 C 6.5 1.5, 11.5 1.5, 17 7 S 28 12.5, 33.5 7 S 44 1.5, 45 7%27 fill=%27none%27 stroke=%27%23309cf0%27 stroke-width=%272.6%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: left bottom; background-size: 46px 11px;
}

/* Layered "sticker" framed photo: color block behind + offset dashed frame */
.framed { position: relative; display: block; margin: 16px; }
.framed img { position: relative; z-index: 1; display: block; width: 100%; border-radius: 16px; border: none; }
.framed::before { content: ""; position: absolute; inset: 0; border-radius: 16px; z-index: 0; }
.framed::after { content: ""; position: absolute; inset: 0; border: 2.5px dashed transparent; border-radius: 20px; transform: translate(-15px, -15px); z-index: 2; pointer-events: none; }
.framed.mint::before { background: var(--mint); }
.framed.mint::after { border-color: var(--green-frame); transform: translate(15px, -15px); }
.framed.pink::before { background: var(--pink); }
.framed.pink::after { border-color: var(--coral); transform: translate(-15px, 15px); }

/* Two-column hero with portrait */
.hero-grid { display: block; }
@media (min-width: 861px) {
  .hero-grid { display: grid; grid-template-columns: 1fr minmax(300px, 400px); gap: 54px; align-items: center; }
}
.hero-figure { max-width: 400px; }

/* Timeline: mint-highlighted years, stacked layout */
.timeline { margin-top: 10px; display: grid; gap: 26px; }
.timeline .t-item { display: block; grid-template-columns: none; }
.timeline .t-year { display: inline-block; background: var(--mint); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 15.5px; padding: 3px 12px; border-radius: 5px; margin-bottom: 10px; }
.timeline .t-body { font-size: 15.5px; }

/* Start-here / about cards get an offset coral dashed "sticker" frame */
.card-grid { gap: 40px; }
.card-grid .card { position: relative; border-radius: 14px; }
.card-grid .card::before { content: ""; position: absolute; inset: -11px; border: 2px dashed var(--coral); border-radius: 20px; pointer-events: none; }

.nav-links a.active, .nav-links button.active { color: var(--ink); font-weight: 600; }

/* Stats / credibility band — adapted from the Springworks about page's ratings row */
.stat-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.stat-band .wrap { display: flex; flex-wrap: wrap; gap: 18px 40px; padding: 30px 24px; }
.stat-item { flex: 1 1 200px; }
.stat-num { font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 1; color: var(--navy); letter-spacing: -0.02em; }
.stat-label { font-size: 14.5px; color: var(--slate); margin-top: 8px; max-width: 240px; }
@media (max-width: 620px) { .stat-num { font-size: 32px; } }

[data-view-section] { display: none; }
[data-view-section].visible { display: block; }

@media (max-width: 600px) {
  .nav-links { gap: 16px; } .nav-links a, .nav-links button { font-size: 14px; }
  .hero { padding: 46px 0 40px; } .quiz-shell { padding: 26px 20px; }
  .result-bar { grid-template-columns: 120px 1fr; }
  .timeline .t-item { grid-template-columns: 64px 1fr; }
}

/* ===== Figma home redesign: Studio Work / draftv1 ===== */
.figma-home {
  --figma-ink: #1b1b1b;
  --figma-muted: #808080;
  --figma-soft-muted: #929292;
  --figma-line: #eeeeee;
  --figma-blue: #39a5f5;
  --figma-mint: #7adbba;
  --figma-green: #22c38c;
  --figma-coral: #ff6760;
  --figma-coral-soft: #ffa4a0;
  --figma-lavender: #cecefc;
  min-height: 100vh;
  background: #ffffff;
  color: var(--figma-ink);
  font-family: var(--display);
}

.figma-home a:hover {
  text-decoration: none;
}

.figma-container {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

.figma-nav {
  border-bottom: 1px solid var(--figma-line);
  background: #ffffff;
}

.figma-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 88px;
}

.figma-brand {
  color: var(--figma-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.figma-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.figma-links a {
  color: var(--figma-soft-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.figma-links a[aria-current="page"],
.figma-links a:hover {
  color: var(--figma-ink);
}

.figma-hero {
  padding: 0;
}

.figma-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 504px) 440px;
  align-items: center;
  justify-content: space-between;
  min-height: 640px;
  gap: 64px;
}

.figma-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.figma-kicker {
  color: var(--figma-muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.42px;
  line-height: 1.5;
  text-transform: uppercase;
}

.figma-hero h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--figma-ink);
  font-size: clamp(32px, 4.3vw, 42px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0;
}

.figma-marker {
  background: linear-gradient(
    transparent 50%,
    var(--figma-lavender) 50%,
    var(--figma-lavender) 86%,
    transparent 86%
  );
}

.figma-hero-text {
  display: grid;
  gap: 24px;
  color: var(--figma-muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.figma-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.figma-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.figma-button:hover {
  transform: translateY(-1px);
}

.figma-button-primary {
  background: var(--figma-blue);
  color: #ffffff;
}

.figma-button-secondary {
  border: 1px solid var(--figma-blue);
  background: #ffffff;
  color: var(--figma-blue);
}

.figma-photo-card {
  position: relative;
  width: min(440px, 100%);
  min-height: 604px;
}

.figma-photo-card::before {
  content: "";
  position: absolute;
  inset: 75px 0 0;
  border: 1.4px dashed var(--frame-color);
  border-radius: 34px;
}

.figma-photo-inner {
  position: absolute;
  left: 27px;
  top: 0;
  width: calc(100% - 54px);
  height: 577px;
  overflow: hidden;
  border-radius: 24px;
}

.figma-photo-inner::before {
  content: "";
  position: absolute;
  inset: 100px 0 0;
  z-index: 0;
  border-radius: 24px;
  background: var(--wash-color);
}

.figma-photo-inner img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.figma-photo-card-mint {
  --frame-color: var(--figma-green);
  --wash-color: rgba(34, 195, 140, 0.2);
}

.figma-photo-card-coral {
  --frame-color: var(--figma-coral);
  --wash-color: rgba(255, 103, 96, 0.2);
}

.figma-section {
  padding: 64px 0;
}

.figma-section-intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: min(960px, 100%);
  margin-bottom: 32px;
}

.figma-section-intro h2 {
  color: #000000;
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0;
}

.figma-section-intro p {
  color: var(--figma-muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.figma-squiggle {
  position: absolute;
  left: 0;
  top: 42px;
  width: 147px;
  height: 4px;
  background: url("data:image/svg+xml,%3Csvg preserveAspectRatio=%22none%22 overflow=%22visible%22 style=%22display: block%3B%22 width=%22151.226%22 height=%227.78658%22 viewBox=%220 0 151.226 7.78658%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath id=%22Vector%22 d=%22M149.333 5.89399L141.819 3.43106C139.438 2.65043 136.871 2.641 134.483 3.40409L130.3 4.74123C127.954 5.49124 125.433 5.49529 123.084 4.7528L118.94 3.44279C116.597 2.70202 114.082 2.7043 111.74 3.4493L107.657 4.74819C105.313 5.49374 102.796 5.4956 100.452 4.75202C99.1665 4.34434 97.8812 3.93645 96.5959 3.52877C94.2548 2.7862 91.7414 2.78696 89.4005 3.53026C88.1205 3.9367 86.8402 4.34335 85.5602 4.74979C83.2147 5.49456 80.6961 5.49375 78.351 4.74762C76.9903 4.31467 75.6299 3.88172 74.2692 3.44878C71.928 2.70387 69.4137 2.70189 67.0711 3.44243L62.9259 4.7528C60.5772 5.49529 58.056 5.49124 55.7097 4.74122L51.5267 3.40409C49.1394 2.641 46.5723 2.65043 44.1907 3.43107L40.5352 4.62926C38.0336 5.44924 35.3308 5.41727 32.8492 4.53835L29.534 3.36413C27.0254 2.47564 24.2916 2.45291 21.7686 3.29957L17.7916 4.63417C15.3544 5.45204 12.718 5.45938 10.2763 4.65509L1.89399 1.89399%22 stroke=%22%2339A5F5%22 stroke-width=%223%22 stroke-linecap=%22square%22/%3E %3C/svg%3E") center / contain no-repeat;
}

.figma-timeline {
  display: grid;
  gap: 24px;
  width: min(864px, 100%);
}

.figma-timeline-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.figma-timeline-item h3 {
  position: relative;
  color: var(--figma-ink);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0;
}

.figma-timeline-item h3::before {
  content: "";
  position: absolute;
  left: 0;
  right: -10px;
  top: 54%;
  z-index: -1;
  height: 13px;
  background: rgba(122, 219, 186, 0.7);
}

.figma-timeline-item p {
  color: var(--figma-muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

.figma-start .figma-section-intro {
  margin-bottom: 56px;
}

.figma-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 366px));
  justify-content: space-between;
  gap: 32px;
}

.figma-start-card-frame {
  display: flex;
  align-items: stretch;
  min-height: 409px;
  border: 1px dashed var(--figma-coral);
  border-radius: 24px;
  padding: 20px;
}

.figma-start-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid var(--figma-coral-soft);
  border-radius: 12px;
  padding: 36px 20px;
  background: #ffffff;
}

.figma-start-card h3 {
  color: #000000;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0 0 12px;
}

.figma-start-card p {
  color: var(--figma-soft-muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

.figma-coral-button {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: var(--figma-coral);
  color: #ffffff;
  cursor: pointer;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 16px;
}

.figma-curator {
  padding-top: 64px;
}

.figma-curator .figma-section-intro {
  margin-bottom: 56px;
}

.figma-curator-grid {
  display: grid;
  grid-template-columns: 440px minmax(0, 494px);
  gap: 56px;
  align-items: start;
}

.figma-curator-media {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.figma-kartik-photo {
  min-height: 537px;
}

.figma-kartik-photo::before {
  inset: 33px 0 0;
  height: 504px;
}

.figma-kartik-photo .figma-photo-inner {
  top: -68px;
}

.figma-kartik-photo .figma-photo-inner img {
  object-position: center bottom;
}

.figma-citation-photo {
  min-height: 588px;
}

.figma-citation-photo::before {
  inset: 16px 0 auto;
  height: 555px;
}

.figma-citation-photo .figma-photo-inner {
  top: 46px;
  height: 495px;
}

.figma-citation-photo .figma-photo-inner::before {
  display: none;
}

.figma-citation-photo .figma-photo-inner img {
  object-fit: cover;
}

.figma-curator-media figcaption {
  color: rgba(27, 27, 27, 0.7);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 12px;
}

.figma-curator-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 40px;
  color: rgba(27, 27, 27, 0.7);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.figma-curator-copy a {
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
}

.figma-curator-copy ul {
  padding-left: 24px;
}

.figma-curator-copy strong {
  color: var(--figma-ink);
  font-weight: 600;
}

.figma-curator-copy blockquote {
  border-left: 2px solid var(--figma-blue);
  margin: 0;
  padding-left: 16px;
}

.figma-curator-copy blockquote p {
  font-style: italic;
  font-weight: 500;
}

.figma-curator-copy cite {
  display: block;
  font-size: 14px;
  font-style: normal;
  margin-top: 8px;
}

@media (max-width: 1020px) {
  .figma-hero-grid,
  .figma-curator-grid {
    grid-template-columns: 1fr;
  }

  .figma-photo-card,
  .figma-curator-media {
    justify-self: center;
  }

  .figma-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .figma-container {
    width: min(100% - 32px, 520px);
  }

  .figma-nav-inner {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    min-height: auto;
    padding: 22px 0;
  }

  .figma-links {
    flex-wrap: wrap;
    gap: 14px 20px;
  }

  .figma-links a {
    font-size: 15px;
  }

  .figma-hero-grid {
    min-height: auto;
    padding: 48px 0 64px;
  }

  .figma-hero h1 {
    font-size: clamp(31px, 10vw, 40px);
  }

  .figma-actions {
    width: 100%;
  }

  .figma-button {
    justify-content: center;
    width: 100%;
  }

  .figma-photo-card {
    min-height: 0;
    aspect-ratio: 440 / 604;
  }

  .figma-photo-card::before {
    inset: 12% 0 0;
  }

  .figma-photo-inner {
    left: 6%;
    width: 88%;
    height: 95%;
  }

  .figma-section {
    padding: 56px 0;
  }

  .figma-squiggle {
    top: 36px;
    width: 128px;
  }

  .figma-card-grid {
    grid-template-columns: 1fr;
  }

  .figma-start-card-frame {
    min-height: 0;
  }

  .figma-curator-grid {
    gap: 36px;
  }

  .figma-kartik-photo,
  .figma-citation-photo {
    min-height: 0;
  }

  .figma-kartik-photo .figma-photo-inner {
    top: -8%;
  }

  .figma-citation-photo .figma-photo-inner {
    top: 8%;
    height: 84%;
  }

  .figma-curator-copy {
    padding-top: 0;
  }
}

/* ===== Figma glossary redesign ===== */
.figma-glossary {
  padding-bottom: 120px;
}

.figma-glossary-hero {
  padding: 96px 0 128px;
}

.figma-glossary-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: min(568px, 100%);
}

.figma-glossary-hero h1 {
  color: var(--figma-ink);
  font-size: clamp(32px, 4.3vw, 42px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0;
}

.figma-glossary-hero p:not(.figma-kicker) {
  color: var(--figma-muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.figma-glossary-hero a,
.figma-glossary .gloss-card a {
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
}

.figma-glossary-section {
  padding: 64px 0;
}

.figma-glossary-section:first-of-type {
  padding-top: 0;
}

.figma-glossary-section .figma-section-intro {
  margin-bottom: 32px;
}

.figma-glossary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.figma-glossary .gloss-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  border: 1px solid rgba(27, 27, 27, 0.2);
  border-radius: 16px;
  background: #ffffff;
  cursor: default;
  padding: 24px;
}

.figma-glossary .gloss-card.fw,
.figma-glossary .gloss-card.idea {
  border-top-color: rgba(27, 27, 27, 0.2);
}

.figma-glossary .gloss-card h3 {
  display: block;
  color: #000000;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0;
}

.figma-glossary .gloss-card h3::after {
  content: none;
}

.figma-glossary .gloss-card .gloss-body {
  display: grid;
  gap: 12px;
  max-height: none;
  opacity: 1;
  overflow: visible;
  margin-top: 0;
  color: rgba(27, 27, 27, 0.6);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  transition: none;
}

.figma-glossary .gloss-card:hover .gloss-body,
.figma-glossary .gloss-card.open .gloss-body,
.figma-glossary .gloss-card:focus-within .gloss-body {
  max-height: none;
  opacity: 1;
  margin-top: 0;
}

.figma-glossary .gloss-card p + p {
  margin-top: 0;
}

.figma-glossary .formula-box {
  border-radius: 8px;
  background: rgba(122, 219, 186, 0.18);
  color: var(--figma-ink);
  font-family: var(--display);
  font-size: 14px;
  font-style: normal;
  line-height: 1.5;
  margin: 0;
  padding: 12px 14px;
}

@media (max-width: 1020px) {
  .figma-glossary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .figma-glossary {
    padding-bottom: 80px;
  }

  .figma-glossary-hero {
    padding: 56px 0 72px;
  }

  .figma-glossary-hero h1 {
    font-size: clamp(31px, 10vw, 40px);
  }

  .figma-glossary-section {
    padding: 52px 0;
  }

  .figma-glossary-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Figma quizzes redesign ===== */
.figma-quizzes-hero {
  padding: 96px 0 104px;
}

.figma-quizzes-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 568px) minmax(280px, 366px);
  align-items: end;
  justify-content: space-between;
  gap: 64px;
}

.figma-quizzes-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.figma-quizzes-hero h1 {
  color: var(--figma-ink);
  font-size: clamp(32px, 4.3vw, 42px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0;
}

.figma-quizzes-hero p:not(.figma-kicker),
.figma-quiz-note p {
  color: var(--figma-muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.figma-quiz-note {
  position: relative;
  border: 1px dashed var(--figma-coral);
  border-radius: 24px;
  padding: 20px;
}

.figma-quiz-note::before {
  content: "";
  position: absolute;
  inset: 20px;
  z-index: 0;
  border-radius: 12px;
  background: rgba(255, 103, 96, 0.08);
}

.figma-quiz-note p {
  position: relative;
  z-index: 1;
}

.figma-quiz-note .figma-quiz-note-kicker {
  color: var(--figma-coral);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.42px;
  line-height: 1.5;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.figma-quizzes-section {
  padding: 64px 0 96px;
}

.figma-quizzes-section .figma-section-intro {
  margin-bottom: 56px;
}

.figma-quiz-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.figma-quiz-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 300px;
  border: 1px solid rgba(27, 27, 27, 0.2);
  border-radius: 16px;
  background: #ffffff;
  padding: 24px;
}

.figma-quiz-card-kicker {
  color: var(--figma-blue);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.figma-quiz-card h3 {
  color: #000000;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0 0 12px;
}

.figma-quiz-card p:not(.figma-quiz-card-kicker) {
  color: rgba(27, 27, 27, 0.62);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

.figma-quiz-card-action {
  display: flex;
  align-items: center;
}

.figma-quizzes .quiz-shell {
  max-width: 820px;
  border: 1px dashed var(--figma-coral);
  border-radius: 24px;
  background: #ffffff;
  padding: 20px;
}

.figma-quizzes .quiz-shell > * {
  position: relative;
  z-index: 1;
}

.figma-quizzes .quiz-shell::before {
  content: "";
  position: absolute;
  inset: 20px;
  z-index: 0;
  border: 1px solid var(--figma-coral-soft);
  border-radius: 12px;
  pointer-events: none;
}

.figma-quizzes .quiz-shell {
  position: relative;
}

.figma-quizzes .quiz-kicker {
  color: var(--figma-blue);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.42px;
  line-height: 1.5;
  margin: 16px 16px 8px;
  text-transform: uppercase;
}

.figma-quizzes .quiz-shell h2 {
  color: var(--figma-ink);
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0 16px;
}

.figma-quizzes .quiz-progress {
  height: 8px;
  margin: 24px 16px 28px;
  border-radius: 999px;
  background: rgba(57, 165, 245, 0.14);
}

.figma-quizzes .quiz-progress span {
  background: var(--figma-blue);
}

.figma-quizzes .quiz-q,
.figma-quizzes .quiz-result,
.figma-quizzes .quiz-feedback,
.figma-quizzes .quiz-disclaimer,
.figma-quizzes .quiz-back,
.figma-quizzes .btn-row {
  margin-left: 16px;
  margin-right: 16px;
}

.figma-quizzes .quiz-q {
  color: var(--figma-ink);
  font-size: 18px;
  line-height: 1.45;
}

.figma-quizzes .quiz-opts {
  gap: 12px;
  margin: 0 16px;
}

.figma-quizzes .quiz-opt {
  border: 1px solid rgba(27, 27, 27, 0.18);
  border-radius: 12px;
  background: #ffffff;
  color: rgba(27, 27, 27, 0.72);
  font-size: 15px;
  line-height: 1.5;
  padding: 14px 16px;
}

.figma-quizzes .quiz-opt:hover:not(:disabled) {
  border-color: var(--figma-blue);
  background: rgba(57, 165, 245, 0.08);
}

.figma-quizzes .quiz-opt.correct {
  border-color: var(--figma-green);
  background: rgba(34, 195, 140, 0.12);
}

.figma-quizzes .quiz-opt.incorrect {
  border-color: var(--figma-coral);
  background: rgba(255, 103, 96, 0.1);
}

.figma-quizzes .btn {
  background: var(--figma-blue);
  border: 1px solid var(--figma-blue);
  border-radius: 8px;
  color: #ffffff;
}

.figma-quizzes .btn.ghost {
  background: #ffffff;
  color: var(--figma-blue);
}

.figma-quizzes .quiz-back-button {
  border: 0;
  background: transparent;
  color: rgba(27, 27, 27, 0.64);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
  text-underline-position: from-font;
}

.figma-quizzes .result-big {
  color: var(--figma-ink);
}

.figma-quizzes .framework-note {
  background: rgba(122, 219, 186, 0.18);
  color: rgba(27, 27, 27, 0.72);
}

/* ===== Redesigned footer ===== */
.figma-footer {
  border-top: 1px solid var(--figma-line);
  background: #ffffff;
  padding: 64px 0 40px;
}

.figma-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(260px, 366px);
  gap: 64px;
  justify-content: space-between;
}

.figma-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.figma-footer h2 {
  color: var(--figma-ink);
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  margin: 0;
}

.figma-footer p {
  color: rgba(27, 27, 27, 0.66);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

.figma-footer-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.figma-footer-logos {
  display: grid;
  gap: 12px;
}

.figma-footer-logos a {
  display: flex;
  align-items: center;
  min-height: 64px;
  border: 1px solid rgba(27, 27, 27, 0.14);
  border-radius: 12px;
  background: #ffffff;
  padding: 14px 16px;
}

.figma-footer-logos img {
  width: auto;
  height: 28px;
  object-fit: contain;
}

.figma-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.figma-footer-links a {
  color: var(--figma-soft-muted);
  font-size: 15px;
  font-weight: 500;
}

.figma-footer-links a:hover {
  color: var(--figma-ink);
}

.figma-footer-bottom {
  display: grid;
  gap: 8px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--figma-line);
}

@media (max-width: 1020px) {
  .figma-quizzes-hero-grid,
  .figma-footer-grid {
    grid-template-columns: 1fr;
  }

  .figma-quiz-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .figma-quizzes-hero {
    padding: 56px 0 72px;
  }

  .figma-quizzes-hero-grid {
    gap: 32px;
  }

  .figma-quizzes-hero h1 {
    font-size: clamp(31px, 10vw, 40px);
  }

  .figma-quizzes-section {
    padding: 52px 0 72px;
  }

  .figma-quiz-list {
    grid-template-columns: 1fr;
  }

  .figma-quizzes .quiz-shell {
    padding: 16px;
  }

  .figma-quizzes .quiz-kicker,
  .figma-quizzes .quiz-shell h2,
  .figma-quizzes .quiz-progress,
  .figma-quizzes .quiz-q,
  .figma-quizzes .quiz-result,
  .figma-quizzes .quiz-feedback,
  .figma-quizzes .quiz-disclaimer,
  .figma-quizzes .quiz-back,
  .figma-quizzes .btn-row,
  .figma-quizzes .quiz-opts {
    margin-left: 8px;
    margin-right: 8px;
  }

  .figma-footer {
    padding: 52px 0 32px;
  }
}