:root {
  color-scheme: light;
  --foundation: #f4f7f1;
  --raised: #fbfcf8;
  --surface: #ffffff;
  --soft: #e6eee4;
  --text: #202724;
  --muted: #5f6d66;
  --border: #d2dcd2;
  --voice: #0b7285;
  --voice-dark: #075c6b;
  --tool: #2f67d8;
  --saffron: #cf7d24;
  --saffron-text: #a65a12;
  --warm: #fff0d7;
  --shadow: rgb(32 39 36 / 12%);
  --page: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  background: var(--foundation);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  overflow-x: clip;
}
body::before {
  background-image: radial-gradient(circle, rgb(11 114 133 / 14%) 1px, transparent 1.5px);
  background-size: 18px 18px;
  content: "";
  height: 280px;
  opacity: 0.45;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: -70px;
  width: 250px;
}
a { color: var(--voice-dark); font-weight: 700; text-underline-offset: 0.2em; }
a:hover { color: var(--tool); }
:focus-visible { outline: 3px solid var(--tool); outline-offset: 4px; }
.skip-link { background: var(--text); color: white; left: 16px; padding: 12px 16px; position: fixed; top: -80px; z-index: 20; }
.skip-link:focus { top: 16px; }
.site-header, .site-footer, main { margin-inline: auto; width: var(--page); }
.site-header { align-items: center; display: flex; justify-content: space-between; min-height: 92px; position: relative; z-index: 1; }
.wordmark { align-items: baseline; color: var(--text); display: flex; gap: 10px; text-decoration: none; }
.wordmark span:first-child { font-family: ui-serif, Georgia, serif; font-size: 1.55rem; font-weight: 800; }
.wordmark span:last-child { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.site-nav { display: flex; gap: 24px; }
.site-nav a { color: var(--text); font-size: 0.92rem; text-decoration: none; }
.site-nav a:hover { color: var(--voice); }

.hero { align-items: center; display: grid; gap: clamp(40px, 7vw, 96px); grid-template-columns: minmax(0, .93fr) minmax(420px, 1.07fr); min-height: calc(100vh - 92px); padding: 64px 0 96px; }
.hero-copy { max-width: 610px; }
.eyebrow { color: var(--saffron-text); font-size: .78rem; font-weight: 800; letter-spacing: .13em; margin: 0 0 16px; text-transform: uppercase; }
.hero h1 { font-family: ui-serif, Georgia, serif; font-size: clamp(3.5rem, 5vw, 5rem); font-weight: 650; letter-spacing: -.055em; line-height: .91; margin: 0; }
.hero-lede { color: var(--muted); font-size: clamp(1.04rem, 1.6vw, 1.2rem); line-height: 1.65; margin: 30px 0 0; max-width: 590px; }
.app-store-link { align-items: center; background: var(--voice-dark); border: 2px solid var(--voice-dark); border-radius: 14px; color: white; display: inline-flex; flex-direction: column; margin-top: 28px; min-height: 56px; padding: 9px 22px 10px; text-align: center; text-decoration: none; transition: background-color 150ms ease, color 150ms ease, transform 150ms ease; }
.app-store-link:hover { background: transparent; color: var(--voice-dark); transform: translateY(-2px); }
.app-store-kicker { font-size: .68rem; font-weight: 600; letter-spacing: .02em; line-height: 1; }
.app-store-name { font-size: 1.12rem; line-height: 1.15; margin-top: 4px; }
.hero-note { color: var(--muted); font-size: .8rem; margin: 14px 0 0; }
.product-story { background: var(--soft); border: 1px solid var(--border); border-radius: 42px; min-height: 640px; overflow: hidden; padding: 42px; position: relative; }
.product-story::after { border: 2px dashed var(--saffron); border-left: 0; border-radius: 0 80px 80px 0; content: ""; height: 120px; opacity: .55; position: absolute; right: -20px; top: 56px; width: 100px; }
.rhythm { display: grid; gap: 22px; list-style: none; margin: 0; padding: 10px 56% 0 0; position: relative; z-index: 2; }
.rhythm li { display: grid; gap: 3px; grid-template-columns: 28px 1fr; }
.rhythm span { color: var(--saffron-text); font-size: .7rem; font-weight: 800; grid-row: 1 / 3; padding-top: 4px; }
.rhythm strong { font-family: ui-serif, Georgia, serif; font-size: 1.25rem; }
.rhythm small { color: var(--muted); font-size: .75rem; line-height: 1.4; }
.thread-line { border-left: 1px dashed var(--saffron); height: 190px; left: 54px; position: absolute; top: 58px; }
.hero-phone { background: var(--text); border: 7px solid var(--text); border-radius: 34px; bottom: -115px; box-shadow: 0 28px 60px var(--shadow); overflow: hidden; position: absolute; right: 44px; transform: rotate(3deg); width: 51%; }
.hero-phone img, .screen-pair img { display: block; height: auto; width: 100%; }

.method, .inside, .heritage, .final-cta { margin-top: clamp(80px, 12vw, 150px); }
.section-heading { max-width: 720px; }
h2 { font-family: ui-serif, Georgia, serif; font-size: clamp(2.5rem, 5vw, 4.8rem); font-weight: 650; letter-spacing: -.045em; line-height: .98; margin: 0; }
.section-heading > p:last-child, .inside-copy > p, .heritage > p, .final-cta > p:not(.eyebrow) { color: var(--muted); font-size: 1.08rem; line-height: 1.7; }
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 54px 0 0; padding: 0; }
.method-grid li { border-top: 1px solid var(--border); min-height: 260px; padding: 26px 32px 24px 0; }
.method-grid li + li { border-left: 1px solid var(--border); padding-left: 32px; }
.step-number { color: var(--saffron-text); font-size: .76rem; font-weight: 800; }
.method-grid h3 { font-family: ui-serif, Georgia, serif; font-size: 1.75rem; line-height: 1.08; margin: 58px 0 12px; }
.method-grid p { color: var(--muted); line-height: 1.6; margin: 0; }
.inside { align-items: center; display: grid; gap: clamp(50px, 8vw, 110px); grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr); }
.inside-copy > p { max-width: 560px; }
.feature-list { border-top: 1px solid var(--border); list-style: none; margin: 32px 0 0; padding: 0; }
.feature-list li { border-bottom: 1px solid var(--border); display: grid; gap: 10px; grid-template-columns: .72fr 1.28fr; padding: 18px 0; }
.feature-list span { color: var(--muted); line-height: 1.45; }
.screen-pair { align-items: end; display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); padding: 36px 0 0; position: relative; }
.screen-pair::before { background: var(--warm); border-radius: 48% 52% 45% 55%; content: ""; inset: 10% -12% 0; position: absolute; transform: rotate(-4deg); }
.screen-pair picture { border: 5px solid var(--text); border-radius: 28px; box-shadow: 0 22px 50px var(--shadow); overflow: hidden; position: relative; }
.screen-pair picture:first-child { margin-bottom: 54px; }
.heritage { align-items: start; background: var(--text); border-radius: 34px; color: var(--raised); display: grid; gap: 60px; grid-template-columns: 1.1fr .9fr; padding: clamp(34px, 6vw, 76px); }
.heritage .eyebrow { color: #f1b45d; }
.heritage > p { color: #c8d3cc; margin: 40px 0 0; }
.final-cta { background: var(--raised); border: 1px solid var(--border); border-radius: 34px; overflow: hidden; padding: clamp(42px, 7vw, 86px); position: relative; text-align: center; }
.final-cta h2 { margin-inline: auto; max-width: 800px; }
.final-cta > p:not(.eyebrow) { margin-inline: auto; max-width: 650px; }
.stitch { border-top: 2px dashed var(--saffron); left: -20px; opacity: .7; position: absolute; top: 34px; transform: rotate(-2deg); width: calc(100% + 40px); }
.site-footer { border-top: 1px solid var(--border); display: grid; gap: 50px; grid-template-columns: 1.4fr 1fr 1fr; margin-top: 80px; padding: 42px 0 64px; }
.footer-brand { display: flex; flex-direction: column; gap: 8px; }
.footer-brand > strong { font-family: ui-serif, Georgia, serif; font-size: 1.55rem; }
.footer-brand > span { color: var(--muted); }
.social-links { display: flex; gap: 16px; margin-top: 12px; }
.footer-links { align-items: start; display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: var(--muted); font-weight: 600; }
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(12px); }
.reveal-ready [data-reveal].is-revealed { opacity: 1; transform: translateY(0); transition: opacity 480ms cubic-bezier(.2, 0, 0, 1), transform 480ms cubic-bezier(.2, 0, 0, 1); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 52px; }
  .hero-copy, .inside-copy { max-width: 720px; }
  .product-story { min-height: 600px; }
  .rhythm { padding-right: 52%; }
  .inside { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  :root { --page: min(100% - 32px, 560px); }
  body::before { display: none; }
  html { scroll-behavior: auto; }
  .site-header { align-items: flex-start; flex-direction: column; gap: 18px; justify-content: center; min-height: 126px; }
  .site-nav { flex-wrap: wrap; gap: 12px 18px; }
  .site-nav a { font-size: .84rem; }
  .hero { gap: 44px; padding: 44px 0 60px; }
  .hero h1 { font-size: clamp(3.15rem, 15.5vw, 5rem); }
  .product-story { border-radius: 28px; min-height: 570px; padding: 28px; }
  .rhythm { gap: 16px; padding: 0; width: 49%; }
  .rhythm li { grid-template-columns: 22px 1fr; }
  .rhythm small { font-size: .68rem; }
  .thread-line { left: 38px; top: 32px; }
  .hero-phone { border-width: 5px; border-radius: 24px; bottom: -44px; right: 20px; width: 51%; }
  .method-grid { grid-template-columns: 1fr; margin-top: 38px; }
  .method-grid li { min-height: auto; padding: 24px 0 32px; }
  .method-grid li + li { border-left: 0; padding-left: 0; }
  .method-grid h3 { margin-top: 24px; }
  .feature-list li { grid-template-columns: 1fr; }
  .screen-pair { gap: 10px; }
  .screen-pair picture { border-radius: 20px; border-width: 3px; }
  .screen-pair picture:first-child { margin-bottom: 34px; }
  .heritage { gap: 8px; grid-template-columns: 1fr; }
  .heritage > p { margin-top: 18px; }
  .site-footer { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .app-store-link:hover { transform: none; }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; }
}

/* Store availability and Android tester enrollment */
.download-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
  margin-top: 28px;
}
.download-option {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}
.download-actions .app-store-link {
  justify-content: center;
  margin-top: 0;
  min-height: 68px;
  width: 100%;
  height: 100%;
}
.download-actions .android-test-link {
  background: var(--raised);
  border-color: var(--voice-dark);
  color: var(--voice-dark);
}
.download-actions .android-test-link:hover {
  background: var(--voice-dark);
  color: white;
}
.final-cta .download-actions { justify-content: center; }
@media (max-width: 540px) {
  .download-actions { flex-direction: column; align-items: stretch; }
  .download-option { width: 100%; flex: none; }
  .download-actions .app-store-link { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .download-actions .app-store-link:hover { transform: none; }
}

/* Inline first-lesson sample. The complete authored lesson remains readable without JS. */
[hidden] { display: none !important; }
.hero { grid-template-rows: auto 1fr; gap: 24px clamp(40px, 7vw, 96px); }
.hero-intro { grid-column: 1; align-self: end; }
.hero-copy { grid-column: 1; align-self: start; }
.hero-right { grid-column: 2; grid-row: 1 / 3; min-width: 0; }
.hero-short { color: var(--muted); line-height: 1.5; margin: 20px 0 0; }
.hero-copy .hero-lede { margin-top: 0; }
.sample { min-height: 0; margin-top: 22px; padding: 32px; overflow: visible; }
.sample.product-story::after { content: none; }
.sample > * { position: relative; z-index: 1; }
.sample-top, .sample-toolbar, .dialogue-header { align-items: center; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sample-top .eyebrow { margin: 0; font-size: .68rem; }
.sample-top a { font-size: .8rem; padding-block: 14px; }
.sample h2 { font-size: 2rem; margin-top: 12px; }
.sample-meta { color: var(--muted); font-size: .85rem; margin: 12px 0 20px; }
.sample-progress { display: flex; gap: 12px; list-style: none; margin: 0 0 12px; padding: 0; }
.sample-progress li { border-top: 2px solid var(--border); color: var(--muted); flex: 1; padding-top: 8px; font-size: .8rem; }
.sample-progress [aria-current] { border-color: var(--saffron); color: var(--saffron-text); font-weight: 700; }
.sample button { border: 1px solid var(--border); border-radius: 14px; background: var(--raised); color: var(--voice-dark); font: inherit; font-weight: 700; cursor: pointer; min-height: 44px; padding: 12px 16px; }
.sample button:hover { border-color: var(--voice-dark); }
.sample button.primary { background: var(--voice-dark); border-color: var(--voice-dark); color: white; width: 100%; }
.sample .sample-audio.primary { align-items: center; border-radius: 50%; display: inline-flex; flex: 0 0 44px; height: 44px; justify-content: center; margin: 7px 0 0; min-height: 44px; padding: 0; width: 44px; }
.sample-phrase-row { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; }
.sample-phrase-row .sample-punjabi { flex: 1; min-width: 0; }
.sample-audio::before { border-bottom: 8px solid transparent; border-left: 12px solid currentColor; border-top: 8px solid transparent; content: ""; height: 0; margin-left: 3px; width: 0; }
.sample-audio[data-state="pause"]::before { background: linear-gradient(to right, currentColor 0 4px, transparent 4px 8px, currentColor 8px 12px); border: 0; height: 16px; margin-left: 0; width: 12px; }
.sample .sample-audio.primary:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; }
.sample-toolbar button { background: transparent; border: 0; font-size: .75rem; padding-inline: 0; }
#sample-position { color: var(--saffron-text); font-size: .75rem; font-weight: 700; margin: 0; }
.sample-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 20px; margin-bottom: 14px; overflow-wrap: anywhere; }
.sample-enhanced .sample-card:not([hidden]) { opacity: 0; transform: translateY(8px); transition: opacity 180ms cubic-bezier(.2, 0, 0, 1), transform 180ms cubic-bezier(.2, 0, 0, 1); }
.sample-enhanced .sample-card.is-entering:not([hidden]) { opacity: 1; transform: translateY(0); }
.sample-enhanced .sample-answer.is-revealing:not([hidden]) { animation: sample-answer-in 220ms cubic-bezier(.2, 0, 0, 1) both; }
@keyframes sample-answer-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.sample-card p { margin: 0 0 12px; }
.sample-punjabi { font-family: "Mukta Mahee", "Gurmukhi MN", "Noto Sans Gurmukhi", sans-serif; font-size: 1.7rem; line-height: 1.5; }
.sample-roman { color: var(--muted); font-size: .95rem; line-height: 1.5; }
.sample-meaning { font-size: 1.12rem; line-height: 1.5; }
.sample-notes { color: var(--muted); font-size: .85rem; line-height: 1.5; }
.sample-prompt { font-family: ui-serif, Georgia, serif; font-size: 1.65rem; line-height: 1.3; }
.sample audio { max-width: 100%; }
.sample .audio-status { color: var(--muted); font-size: .8rem; line-height: 1.4; margin: 8px 0 0; }
.audio-status:empty { display: none; }
.sample-enhanced #sample-items .baseline-label { display: none; }
.sample-feedback { display: flex; gap: 12px; }
.sample-feedback button { flex: 1; }
#sample-complete h3 { font: 600 2rem/1.1 ui-serif, Georgia, serif; letter-spacing: -.035em; margin: 20px 0; }
#sample-complete p { line-height: 1.5; }
#sample-complete .download-actions { flex-direction: column; align-items: stretch; }
#sample-complete .download-option { flex: none; }
#sample-restart { margin-top: 20px; }
#sample-dialogue { background: var(--foundation); border: 1px solid var(--border); border-radius: 24px; color: var(--text); padding: 24px; width: min(600px, calc(100% - 32px)); max-height: 85dvh; }
#sample-dialogue::backdrop { background: rgb(32 39 36 / 55%); }
.dialogue-header { margin-bottom: 20px; }
.dialogue-header h2 { margin: 0; }
.baseline-label { color: var(--saffron-text); font-size: .8rem; }
@media (max-width: 900px) {
  .hero { display: flex; flex-direction: column; align-items: stretch; }
  .hero-intro, .hero-copy { align-self: auto; }
  .hero-right { width: 100%; }
  .sample { width: 100%; }
}
@media (max-width: 680px) {
  .site-header { min-height: 100px; gap: 10px; }
  .site-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .hero { padding-top: 16px; gap: 20px; }
  .hero h1 { font-size: 2.4rem; line-height: 1.2; letter-spacing: -.045em; }
  .hero .eyebrow { margin-bottom: 12px; }
  .hero-short { font-size: .875rem; margin-top: 14px; }
  .sample { padding: 20px; }
  .sample h2 { font-size: 1.75rem; margin-top: 4px; }
  .sample-top .eyebrow { margin: 0; font-size: .62rem; }
  .sample-meta { margin: 10px 0 16px; }
  .sample-card { padding: 16px; }
  .sample-punjabi { font-size: 1.65rem; }
  .sample-toolbar { margin-bottom: 4px; }
}
@media (min-width: 901px) {
  .hero { min-height: auto; padding-bottom: 48px; }
  .hero h1 { font-size: 3.75rem; line-height: 1.15; }
  .sample { align-self: start; }
}
@media (max-width: 680px) {
  .site-header { background: var(--foundation); position: sticky; top: 0; z-index: 5; }
  .sample { scroll-margin-top: 112px; }
}

.hero h1, .sample h2 { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .sample-enhanced .sample-card:not([hidden]) { opacity: 1; transform: none; transition: none; }
  .sample-enhanced .sample-answer.is-revealing:not([hidden]) { animation: none; }
}

/* Inline vector welcome animation. */
.welcome-animation { margin: 0; max-width: 100%; }
.welcome-animation .welcome-art { background: var(--foundation); border: 0; border-radius: 0; display: block; height: 100%; width: 100%; }
.guide-index { align-items: start; border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); display: grid; gap: 32px; grid-template-columns: minmax(220px, .75fr) 1.25fr; margin-top: clamp(64px, 10vw, 112px); padding: 34px 0; }
.guide-index h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.05; }
.guide-index ul { display: grid; gap: 0 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.guide-index li { border-bottom: 1px solid var(--border); min-width: 0; }
.guide-index a { color: var(--text); display: block; min-height: 72px; padding: 13px 4px; text-decoration: none; }
.guide-index a:hover { color: var(--voice-dark); }
.guide-index a span { color: var(--muted); display: block; font-size: .8rem; font-weight: 400; line-height: 1.4; margin-top: 4px; }
@media (max-width: 680px) { .guide-index { grid-template-columns: 1fr; gap: 12px; margin-top: 58px; } .guide-index ul { grid-template-columns: 1fr; } }

/* Full-viewport welcome animation followed by the landing message and calls to action. */
.site-header {
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  z-index: 10;
}
.hero {
  display: flex;
  flex-direction: column;
  gap: 0;
  isolation: isolate;
  margin-left: calc(50% - 50vw);
  min-height: 0;
  overflow: visible;
  padding: 0;
  position: relative;
  width: 100vw;
}
.hero::after {
  display: none;
}
.hero-content {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-inline: auto;
  max-width: 1180px;
  position: relative;
  width: calc(100% - 40px);
  padding-block: clamp(48px, 8vw, 92px);
}
.hero-intro,
.hero-copy {
  align-self: stretch;
  max-width: 680px;
}
.hero h1 {
  font-size: clamp(3.5rem, 6.5vw, 6.3rem);
  line-height: .96;
  max-width: 760px;
}
.hero .hero-copy .hero-lede {
  margin-top: 0;
}
.welcome-animation {
  height: 100vh;
  height: 100svh;
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.welcome-animation .welcome-art {
  background: var(--foundation);
  border: 0;
  border-radius: 0;
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}
.welcome-see-more {
  align-items: center;
  animation: welcome-see-more-enter 500ms 4.75s ease-out both;
  bottom: max(24px, env(safe-area-inset-bottom));
  color: var(--muted);
  display: flex;
  flex-direction: column;
  font-size: .875rem;
  gap: 6px;
  left: 50%;
  min-height: 44px;
  justify-content: center;
  position: absolute;
  text-decoration: none;
  transform: translateX(-50%);
}
.welcome-see-more span { color: var(--voice-dark); font-size: 1.1rem; line-height: 1; }
.welcome-see-more:hover { color: var(--text); }
.welcome-see-more:focus-visible { border-radius: 4px; outline: 2px solid var(--voice-dark); outline-offset: 4px; }
.hero h1 {
  font-size: clamp(3.25rem, 6vw, 5.75rem);
  line-height: .98;
}
.sample {
  margin-top: clamp(44px, 7vw, 88px);
}
@media (max-width: 900px) {
  .hero-content {
    max-width: 720px;
  }
}
@media (max-width: 680px) {
  .site-header {
    align-items: flex-start;
    background: transparent;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    min-height: 112px;
    padding-top: 12px;
  }
  .hero {
    margin-left: calc(50% - 50vw);
    min-height: 0;
    padding: 0;
  }
  .hero-content {
    gap: 22px;
    padding-block: 44px 60px;
    width: calc(100% - 32px);
  }
  .hero h1 {
    font-size: clamp(3rem, 14vw, 5rem);
    line-height: 1;
  }
  .hero .hero-copy .hero-lede {
    margin-top: 0;
  }
}

/* Pair the live lesson with the landing copy beneath the video opener. */
.hero-followup {
  align-items: start;
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin: clamp(48px, 7vw, 88px) auto;
  max-width: 1180px;
  width: calc(100% - 40px);
}
.hero-followup .hero-content {
  gap: 24px;
  margin: 0;
  max-width: none;
  padding: 0;
  width: auto;
}
.hero-followup .hero-intro,
.hero-followup .hero-copy {
  align-self: stretch;
  max-width: none;
}
.hero-followup .sample {
  margin: 0;
  min-width: 0;
}
.welcome-thread {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 7;
  vector-effect: non-scaling-stroke;
}
.welcome-thread-teal {
  animation: welcome-thread-drift-teal 8s 4.75s ease-in-out infinite alternate backwards;
}
.welcome-thread-teal path { animation: welcome-thread-draw 2.9s .1s cubic-bezier(.2, .7, .2, 1) both; }
.welcome-thread-teal path:first-child { stroke: #0b7285; }
.welcome-thread-saffron {
  animation: welcome-thread-drift-saffron 9s 4.75s ease-in-out infinite alternate backwards;
}
.welcome-thread-saffron path { animation: welcome-thread-draw 2.9s .45s cubic-bezier(.2, .7, .2, 1) both; }
.welcome-thread-saffron path:first-child { stroke: #cf7d24; }
.welcome-thread .welcome-thread-highlight {
  opacity: .7;
  stroke-width: 2;
}
.welcome-thread-teal .welcome-thread-highlight { stroke: #55a0a5; }
.welcome-thread-saffron .welcome-thread-highlight { stroke: #e9a44f; }
.welcome-wordmark {
  animation: welcome-wordmark-enter 2100ms 2.65s ease-in-out both;
  fill: var(--text);
  font-family: "Mukta Mahee", "Gurmukhi MN", "Noto Sans Gurmukhi", sans-serif;
  font-size: 112px;
  font-weight: 700;
  paint-order: stroke fill;
  stroke: var(--foundation);
  stroke-linejoin: round;
  stroke-width: 22px;
  text-anchor: middle;
}
@keyframes welcome-thread-draw {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}
@keyframes welcome-wordmark-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes welcome-see-more-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes welcome-thread-drift-teal {
  from { transform: translate(0, 0); }
  to { transform: translate(48px, -18px); }
}
@keyframes welcome-thread-drift-saffron {
  from { transform: translate(0, 0); }
  to { transform: translate(-40px, 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-thread-teal,
  .welcome-thread-saffron { animation: none; }
  .welcome-thread path { animation: none; stroke-dashoffset: 0; }
  .welcome-wordmark { animation: none; opacity: 1; transform: none; }
  .welcome-see-more { animation: none; opacity: 1; }
}
@media (max-width: 900px) {
  .hero-followup {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-followup .sample {
    margin-top: 12px;
  }
}