/* ==========================================================================
   Fineshot — homepage. One job per section, like the App Store posters.
   Palette from the posters (Rose Tide): dusk, indigo, rose, cream, lavender.
   Motion runs only while a visual is on screen (site.js adds .live) and
   never under reduced motion, where each visual shows its finished state.
   ========================================================================== */

/* ---------- Themes ---------- */
.theme-dusk, .theme-indigo {
  --fg: #FFFFFF;
  --line: rgba(255, 255, 255, .16);
  --card: rgba(255, 255, 255, .06);
}
.theme-dusk {
  --bg: linear-gradient(170deg, #2B1B50 0%, #1A1340 55%, #120E2E 100%);
  --sub: #D3C6EA;
  --glow-a: rgba(224, 122, 142, .26);
  --glow-b: rgba(255, 178, 122, .14);
}
.theme-indigo {
  --bg: linear-gradient(165deg, #1B1846 0%, #121034 60%, #0C0A24 100%);
  --sub: #C4C4EC;
  --glow-a: rgba(107, 91, 224, .3);
  --glow-b: rgba(224, 122, 142, .14);
}
.theme-rose, .theme-cream, .theme-lavender {
  --fg: #221538;
  --line: rgba(34, 21, 56, .14);
  --card: rgba(255, 255, 255, .55);
  --glow-a: rgba(255, 255, 255, .75);
  --glow-b: rgba(244, 166, 160, .22);
}
.theme-rose { --bg: linear-gradient(170deg, #FBE3DC 0%, #F4D3D6 55%, #E9D2E6 100%); --sub: #6E4A5E; }
.theme-cream { --bg: linear-gradient(170deg, #FFF7EE 0%, #FCEADB 100%); --sub: #735B55; }
.theme-lavender { --bg: linear-gradient(170deg, #F1ECFB 0%, #E3DAF4 100%); --sub: #5D4F7E; }

[class*="theme-"] {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  isolation: isolate;
}
/* Quiet depth: two soft light sources, no blur filters. */
[class*="theme-"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 45% at 12% 30%, var(--glow-a), transparent 70%),
    radial-gradient(45% 40% at 88% 85%, var(--glow-b), transparent 70%);
}

.home { background: #120E2E; }
.dot { color: #F83442; }

/* ---------- Nav on the homepage ---------- */
.home .nav.scrolled {
  background: rgba(26, 19, 64, .9);
  border-bottom-color: rgba(211, 198, 234, .14);
}
.home .nav-links > a:not(.btn) { color: #D3C6EA; }
.home .nav-links > a:not(.btn):hover { color: #fff; }
.home .btn-light { color: #221538; }

/* ---------- Hero ---------- */
.hero { padding: 128px 0 0; overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 56px;
  align-items: center;
}
.kicker {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sub);
}
.hero-title {
  margin: 0;
  font-size: clamp(44px, 6.6vw, 84px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.hero-sub {
  margin: 24px 0 0;
  max-width: 30em;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.4;
  font-weight: 500;
  color: var(--sub);
  text-wrap: pretty;
}
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px; }
.soon-badge { color: #221538; box-shadow: 0 14px 34px rgba(12, 6, 36, .35); }

.hero-visual { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hv-art {
  width: min(360px, 70vw);
  aspect-ratio: 760 / 1565;
}
.hv-art img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  box-shadow: 0 40px 90px rgba(10, 4, 30, .5);
}
.hero-visual figcaption { font-size: 14px; font-weight: 500; color: var(--sub); }

/* The bare screenshot first, then the frame and background around it. */
html.js .hv-art img {
  animation: hv-reveal 1.8s cubic-bezier(.2, .8, .2, 1) .35s both paused;
}
html.js .hero-visual.live .hv-art img { animation-play-state: running; }
@keyframes hv-reveal {
  0%, 15% { clip-path: inset(16.3% 18.1% 16.2% 18.1% round 36px); transform: scale(1.1); }
  100% { clip-path: inset(0 0 0 0 round 18px); transform: none; }
}

/* Job index under the hero */
.jobs-index { margin-top: 84px; border-top: 1px solid var(--line); }
.jobs-index ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.jobs-index a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: var(--fg);
  transition: color .2s ease;
}
.jobs-index a:hover { color: #F6D6D3; }
.jobs-index b { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--sub); }

/* ---------- Job sections ---------- */
.job { padding: clamp(88px, 11vw, 150px) 0; overflow: hidden; }
.job-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.flip .job-copy { order: 2; }
.job-copy { max-width: 34rem; }
.job-num {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--sub);
}
.tag {
  padding: 3px 10px;
  border-radius: 999px;
  background: #F83442;
  color: #fff;
  font-size: 12px;
  letter-spacing: .02em;
}
.job-title {
  margin: 0;
  font-size: clamp(36px, 4.8vw, 60px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.036em;
  text-wrap: balance;
}
.job-sub {
  margin: 22px 0 0;
  max-width: 30em;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.4;
  font-weight: 500;
  color: var(--sub);
  text-wrap: pretty;
}
.job-note {
  margin: 16px 0 0;
  max-width: 32em;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sub);
}
.job-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 26px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: var(--fg);
  border-bottom: 1.5px solid var(--line);
  padding-bottom: 2px;
  transition: border-color .2s ease;
}
.job-link::after { content: "\2192"; transition: transform .2s ease; }
.job-link:hover { border-color: currentColor; }
.job-link:hover::after { transform: translateX(3px); }

/* ---------- Visual frame shared by every job ---------- */
.job-visual {
  position: relative;
  margin: 0;
  justify-self: center;
  width: min(330px, 76vw);
}

/* Guide clips are cropped to the recorded phone, bezel included. */
.clip {
  aspect-ratio: 464 / 980;
  border-radius: 15.1% / 7.15%;
  overflow: hidden;
  background: #16151C;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 80px rgba(12, 6, 36, .32);
}
.clip video, .clip img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* A drawn bezel with the same proportions as the clips. */
.device {
  aspect-ratio: 464 / 980;
  padding: 2.6%;
  border-radius: 15.1% / 7.15%;
  background: linear-gradient(145deg, #3d3848 0%, #1d1a26 22%, #0e0c14 55%, #26222e 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 80px rgba(12, 6, 36, .32);
  container-type: inline-size;
}
.device .screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 13.2% / 6.1%;
  background: #000;
}
.device .screen > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pause / play for anything that loops longer than five seconds. */
.motion-toggle {
  position: absolute;
  right: -10px;
  bottom: -10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #221538;
  box-shadow: 0 6px 18px rgba(12, 6, 36, .25);
  cursor: pointer;
  opacity: .85;
  transition: opacity .2s ease, transform .2s ease;
}
.motion-toggle:hover { opacity: 1; transform: scale(1.05); }
.ab .motion-toggle, .sc .motion-toggle { top: -14px; bottom: auto; }
.motion-toggle i { width: 12px; height: 12px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.motion.paused .motion-toggle i {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent currentColor;
}
html:not(.js) .motion-toggle, html.reduced .motion-toggle { display: none; }

/* ---------- 04 Scroll Capture ---------- */
.job-visual.sc { width: min(500px, 92vw); }
.sc-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, .5fr);
  align-items: center;
  gap: 10px;
}
.sc-phone .screen { background: #F4F1FB; }
.sc-chrome { z-index: 0; }
.sc-window {
  position: absolute;
  left: 0;
  right: 0;
  top: 12.73%;
  height: 77.16%;
  overflow: hidden;
  z-index: 1;
}
.sc-thread { display: block; width: 100%; height: auto; }
/* iOS shows a red capsule behind the time while it records the screen. */
.sc-rec {
  position: absolute;
  left: 9.4%;
  top: 2.75%;
  width: 12.2%;
  height: 2.5%;
  border-radius: 999px;
  background: #F83442;
  z-index: 2;
}
.sc-rec::after {
  content: "9:41";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font: 600 4.1cqw/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  letter-spacing: -0.01em;
}
.sc-join { color: #F6D6D3; display: grid; place-items: center; }
.sc-join svg { width: 26px; height: 26px; }
.sc-result { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sc-tall {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 2937;
  border-radius: 6px;
  overflow: hidden;
  outline: 1.5px dashed rgba(246, 214, 211, .45);
  outline-offset: 3px;
  box-shadow: 0 30px 60px rgba(12, 6, 36, .35);
}
.sc-tall img { display: block; width: 100%; height: 100%; }
.sc-done {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff;
  color: #221538;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(12, 6, 36, .3);
}
.sc-done svg { color: #1F9D55; }

/* One 13 s cycle shared by every moving part, so they stay in step:
   hold, scroll while the tall image fills in from the top, hold, reset. */
html.js:not(.reduced) .sc .sc-thread { animation: sc-scroll 13s cubic-bezier(.45, .05, .55, .95) infinite; }
html.js:not(.reduced) .sc .sc-tall img { animation: sc-fill 13s cubic-bezier(.45, .05, .55, .95) infinite; }
html.js:not(.reduced) .sc .sc-done { animation: sc-done 13s ease infinite; }
html.js:not(.reduced) .sc .sc-join { animation: sc-join 13s ease infinite; }
html.js:not(.reduced) .sc .sc-rec { animation: sc-rec 13s ease infinite; }
.sc .sc-thread, .sc .sc-tall img, .sc .sc-done, .sc .sc-join, .sc .sc-rec { animation-play-state: paused; }
html.js .sc.live:not(.paused) :is(.sc-thread, .sc-tall img, .sc-done, .sc-join, .sc-rec) { animation-play-state: running; }

@keyframes sc-scroll {
  0% { transform: translateY(0); opacity: 0; }
  3%, 10% { transform: translateY(0); opacity: 1; }
  68%, 92% { transform: translateY(-66.1%); opacity: 1; }
  98% { transform: translateY(-66.1%); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
@keyframes sc-fill {
  0% { clip-path: inset(0 0 66.1% 0); opacity: 0; }
  3%, 10% { clip-path: inset(0 0 66.1% 0); opacity: 1; }
  68%, 92% { clip-path: inset(0 0 0 0); opacity: 1; }
  98% { clip-path: inset(0 0 0 0); opacity: 0; }
  100% { clip-path: inset(0 0 66.1% 0); opacity: 0; }
}
@keyframes sc-done {
  0%, 70% { opacity: 0; transform: translateY(6px); }
  75%, 92% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: none; }
}
@keyframes sc-join {
  0%, 10% { opacity: .35; transform: none; }
  20%, 60% { opacity: 1; transform: translateX(3px); }
  68%, 100% { opacity: .35; transform: none; }
}
@keyframes sc-rec {
  0%, 2% { opacity: 0; }
  5%, 68% { opacity: 1; }
  72%, 100% { opacity: 0; }
}

/* ---------- 06 Bug: the plain screenshot, then the marked-up one ---------- */
.ba .ba-after { z-index: 1; }
html.js:not(.reduced) .ba .ba-after { animation: ba-wipe 8s cubic-bezier(.6, 0, .3, 1) infinite paused; }
html.js .ba.live:not(.paused) .ba-after { animation-play-state: running; }
@keyframes ba-wipe {
  0%, 18% { clip-path: inset(0 100% 0 0); opacity: 1; }
  38%, 88% { clip-path: inset(0 0 0 0); opacity: 1; }
  97% { clip-path: inset(0 0 0 0); opacity: 0; }
  100% { clip-path: inset(0 100% 0 0); opacity: 0; }
}

/* ---------- 07 Action button: three steps in turn ---------- */
.job-visual.ab { width: min(520px, 92vw); }
.ab-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 3vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: end;
}
.ab-steps li { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ab-art { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; min-height: 0; }
.ab-steps p {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  font-size: clamp(12.5px, 1.5vw, 15px);
  line-height: 1.25;
  font-weight: 700;
  min-height: 2.5em;
}
.ab-steps p b {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #F83442;
  color: #fff;
  font-size: 11px;
}
.device.small { width: 88%; padding: 3%; }
.ab-flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 1; }
.ab-phone {
  position: relative;
  width: 76%;
  aspect-ratio: 250 / 500;
  border: 5px solid #2B2536;
  border-radius: 22% / 11%;
  background: linear-gradient(170deg, #F6E3EA, #E2DAF5);
  display: grid;
  place-items: center;
  box-shadow: 0 16px 40px rgba(20, 10, 50, .2);
}
.ab-phone img { width: 44%; height: auto; border-radius: 22%; box-shadow: 0 6px 16px rgba(40, 16, 70, .3); }
.ab-phone i { position: absolute; left: -9px; width: 4px; border-radius: 3px 0 0 3px; background: #2B2536; }
.ab-phone .ab-btn { top: 18%; height: 10%; background: #FF8A1F; box-shadow: 0 0 0 4px rgba(255, 138, 31, .22), 0 0 20px rgba(255, 138, 31, .8); }
.ab-phone .ab-vol { top: 33%; height: 15%; }
.ab-phone .ab-vol2 { top: 51%; }
.ab-pill {
  padding: 6px 9px;
  border-radius: 12px;
  background: #FF8A1F;
  color: #fff;
  font-size: clamp(9.5px, 1.2vw, 12px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 8px 20px rgba(255, 138, 31, .35);
}
.ab-result { position: relative; width: 100%; }
.ab-result img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 18px 40px rgba(20, 10, 50, .25); }
.ab-toast {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(34, 21, 56, .9);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

html.js:not(.reduced) .ab .ab-1 { animation: ab-1 10s ease infinite paused; }
html.js:not(.reduced) .ab .ab-2 { animation: ab-2 10s ease infinite paused; }
html.js:not(.reduced) .ab .ab-3 { animation: ab-3 10s ease infinite paused; }
html.js:not(.reduced) .ab .ab-flash { animation: ab-flash 10s ease infinite paused; }
html.js:not(.reduced) .ab .ab-btn { animation: ab-btn 10s ease infinite paused; }
html.js:not(.reduced) .ab .ab-pill { animation: ab-pill 10s cubic-bezier(.34, 1.4, .64, 1) infinite paused; }
html.js:not(.reduced) .ab .ab-toast { animation: ab-toast 10s ease infinite paused; }
html.js .ab.live:not(.paused) :is(.ab-1, .ab-2, .ab-3, .ab-flash, .ab-btn, .ab-pill, .ab-toast) { animation-play-state: running; }

@keyframes ab-1 { 0% { opacity: .3; } 6%, 90% { opacity: 1; } 100% { opacity: .3; } }
@keyframes ab-2 { 0%, 22% { opacity: .3; } 28%, 90% { opacity: 1; } 100% { opacity: .3; } }
@keyframes ab-3 { 0%, 50% { opacity: .3; transform: translateY(14px); } 58%, 90% { opacity: 1; transform: none; } 100% { opacity: .3; transform: translateY(14px); } }
@keyframes ab-flash { 0%, 8% { opacity: 0; } 10% { opacity: .9; } 16%, 100% { opacity: 0; } }
@keyframes ab-btn {
  0%, 30% { transform: none; box-shadow: none; background: #2B2536; }
  33% { transform: translateX(2px); background: #FF8A1F; box-shadow: 0 0 0 4px rgba(255, 138, 31, .22), 0 0 20px rgba(255, 138, 31, .8); }
  40%, 90% { transform: none; background: #FF8A1F; box-shadow: 0 0 0 4px rgba(255, 138, 31, .22), 0 0 20px rgba(255, 138, 31, .8); }
  100% { transform: none; box-shadow: none; background: #2B2536; }
}
@keyframes ab-pill { 0%, 34% { opacity: 0; transform: scale(.7); } 40%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ab-toast { 0%, 62% { opacity: 0; transform: translate(-50%, 6px); } 67%, 90% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }

/* ---------- 08 Answer a question: a thread that fills in ---------- */
.device .chat-screen { background: #F6F4FA; color: #1C1730; font-size: 4.3cqw; }
.chat-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5cqw;
  padding: 13cqw 0 3.5cqw;
  border-bottom: 1px solid rgba(28, 23, 48, .08);
  background: rgba(255, 255, 255, .7);
  font-size: 3.6cqw;
}
.chat-avatar {
  display: grid;
  place-items: center;
  width: 11cqw;
  height: 11cqw;
  border-radius: 50%;
  background: linear-gradient(160deg, #F7A0A8, #E07A8E);
  color: #fff;
  font-weight: 700;
  font-size: 5cqw;
}
.chat-body { display: flex; flex-direction: column; gap: 3cqw; padding: 5cqw 4.5cqw; }
.bubble {
  max-width: 78%;
  margin: 0;
  padding: 2.6cqw 4cqw;
  border-radius: 5cqw;
  line-height: 1.3;
}
.bubble.in { align-self: flex-start; background: #fff; box-shadow: 0 1px 2px rgba(28, 23, 48, .08); }
.bubble.out { align-self: flex-end; background: #6B4FE0; color: #fff; }
.bubble.pic { width: 54%; padding: 0; overflow: hidden; border-radius: 4cqw; background: #000; }
.bubble.pic img { display: block; width: 100%; height: auto; }
.chat-last { display: grid; }
.chat-last > * { grid-area: 1 / 1; }
.typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 1.4cqw;
  width: max-content;
  margin: 0;
  padding: 3.6cqw 4cqw;
  border-radius: 5cqw;
  background: #fff;
  opacity: 0;
}
.typing i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #9C95B0; }

html.js:not(.reduced) .chat .c1 { animation: c1 11s ease infinite paused; }
html.js:not(.reduced) .chat .c2 { animation: c2 11s ease infinite paused; }
html.js:not(.reduced) .chat .c3 { animation: c3 11s ease infinite paused; }
html.js:not(.reduced) .chat .c4 { animation: c4 11s ease infinite paused; }
html.js:not(.reduced) .chat .c5 { animation: c5 11s ease infinite paused; }
html.js:not(.reduced) .chat .typing i { animation: dot 1s ease-in-out infinite paused; }
.chat .typing i:nth-child(2) { animation-delay: .15s !important; }
.chat .typing i:nth-child(3) { animation-delay: .3s !important; }
html.js .chat.live:not(.paused) :is(.c1, .c2, .c3, .c4, .c5, .typing i) { animation-play-state: running; }

@keyframes c1 { 0%, 4% { opacity: 0; transform: translateY(8px); } 8%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes c2 { 0%, 17% { opacity: 0; transform: translateY(8px); } 21%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes c3 { 0%, 28% { opacity: 0; transform: translateY(12px) scale(.96); } 34%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes c4 { 0%, 50% { opacity: 0; } 53%, 64% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes c5 { 0%, 65% { opacity: 0; transform: translateY(8px); } 69%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes dot { 0%, 100% { transform: none; opacity: .5; } 50% { transform: translateY(-1cqw); opacity: 1; } }

/* ---------- On device ---------- */
.ondevice { padding: clamp(96px, 12vw, 160px) 0; text-align: center; }
.ondevice-inner { display: flex; flex-direction: column; align-items: center; }
.ondevice .job-title { max-width: 14ch; }
.ondevice .job-sub { max-width: 34em; }
.ondevice-icon { width: 96px; height: 96px; margin-bottom: 30px; border-radius: 22px; box-shadow: 0 18px 40px rgba(40, 16, 70, .25); }
.facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  font-size: 17px;
  font-weight: 700;
}
.facts li { display: flex; align-items: center; gap: 9px; }
.facts li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #F83442; }

/* ---------- Also included ---------- */
.more { padding: clamp(88px, 10vw, 130px) 0; }
.section-title { font-weight: 800; letter-spacing: -0.036em; text-wrap: balance; }
.more-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 32px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.more-list li { padding: 22px 0 24px; border-top: 1px solid var(--line); }
.more-list h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -0.015em; }
.more-list p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--sub); }
.more-list a { color: var(--fg); font-weight: 600; }

/* ---------- Pro ---------- */
.pro { padding: clamp(88px, 10vw, 130px) 0; }
.pro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.pro-col { padding: 30px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.pro-col h3 { margin: 0 0 12px; font-size: 22px; }
.pro-col ul { margin: 0; padding: 0 0 0 1.1em; color: var(--sub); }
.pro-col li { margin: 7px 0; }
.pro-col-pro { background: linear-gradient(160deg, rgba(224, 122, 142, .22), rgba(255, 178, 122, .1)); border-color: rgba(246, 214, 211, .3); }
.pro-note { margin: 18px 0 0; font-size: 14px; color: var(--sub); }

/* ---------- Final ---------- */
.final { padding: clamp(96px, 12vw, 150px) 0; text-align: center; }
.final-inner { display: flex; flex-direction: column; align-items: center; }
.final-icon { width: 88px; height: 88px; margin-bottom: 26px; border-radius: 20px; box-shadow: 0 18px 40px rgba(40, 16, 70, .22); }
.final .soon-badge { margin-top: 10px; background: #221538; color: #fff; }
.final .soon-text small { color: #D3C6EA; }
.final-note { margin: 22px 0 0; font-size: 15px; color: var(--sub); }

/* ---------- Footer ---------- */
.home .footer { background: #0E0B24; border-top-color: rgba(211, 198, 234, .12); }
.home .footer-inner, .home .footer-links a { color: #C4C4EC; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .more-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero { padding-top: 100px; }
  .hero-grid, .job-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .flip .job-copy { order: 0; }
  .hv-art { width: min(300px, 66vw); }
  .jobs-index { margin-top: 64px; }
  .jobs-index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .jobs-index a { font-size: 14px; padding: 15px 2px; }
  .job-visual { width: min(300px, 72vw); }
  .pro-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .more-list { grid-template-columns: minmax(0, 1fr); }
  .motion-toggle { right: -4px; bottom: -4px; }
  .sc-stage { grid-template-columns: minmax(0, 1fr) 24px minmax(0, .5fr); gap: 6px; }
  .sc-join svg { width: 20px; height: 20px; }
}

/* ---------- Reduced motion: every visual shows its finished state ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .hv-art img { animation: none; }
}
html.reduced .hv-art img { animation: none; }
html.reduced .typing { display: none; }